How to use css-minimizer-webpack-plugin + Vue3 Cli?

Question

webpack

Hello, trying to optimize the generated css, I decided to use сss-minimizer-webpack-plugin(why, unlike html-webpack-plugin/terser-webpack-plugin, it didn’t come with vue / cli and I had to yarn add css-minimizer-webpack-plugin --save-dev)
Actually, after such a setup, according to the documentation

new CssMinimizerWebpackPlugin({
          minify: [
            CssMinimizerWebpackPlugin.cssnanoMinify,
            CssMinimizerWebpackPlugin.cleanCssMinify,
          ],
          minimizerOptions: [
            {
              preset: ["advanced", { discardComments: { removeAll: true } }],
            },
            {
              level: {
                1: {
                  roundingPrecision: "all=2,px=4",
                },
              },
            },
          ],
        }),

yarn lint passes all checks, but yarn serve

0% compiling ERROR  TypeError: Cannot read properties of undefined (reading 'tapPromise')
TypeError: Cannot read properties of undefined (reading 'tapPromise')
    at D:\Projects\FrontEnd\node_modules\css-minimizer-webpack-plugin\dist\index.js:375:3

in fact, judging by the comments of other people, the problem arises from the incompatibility of the version of webpack and css-minimizer-webpack-plugin
yarn list webpack = [email protected] although there is already 5.64.1 (why @vue/cli installed the old webpack) and is it possible update

Answer 1

Judging by the documentation, there is now a new version @vue/[email protected] https://next.cli.vuejs.org/migrations/migrate-from...