webpack v5 support

[evenstensberg]

It would be nice with webpack v5 support

[Drumstix42]

Main readme links to a webpack v5 repo

[evenstensberg]

The latest has a dependency mismatch

[sudofox]

Yeah, I have webpack v5 but it wants webpack 4 still.

npm WARN [email protected] requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.

[wadehenning]

@sudofox What is the work around for this? I am trying to create a new Elixir Phoenix Liveview phx.server.

[alexander-akait]

For webpack v5 or above please use css-minimizer-webpack-plugin https://github.com/webpack-contrib/css-minimizer-webpack-plugin/ instead.

[nolimitdev]

@alexander-akait but https://github.com/webpack-contrib/css-minimizer-webpack-plugin/ is not replacement for case when custom CSS processor is specified by cssProcessor option. So is there some webpack 5 compatible alternative for code below? In my specific case I need to apply postcss in "plugins" section not in "module" section of webpack config.

module.exports = (env, options) => {
    return {
        ...,
        plugins : [
            new OptimizeCssAssetsPlugin({
                cssProcessor : Postcss([
                    PostcssCssVariables(),
                    ...
                ]),
            }),
        ],
    };
};

Is it possible to add webpack 5 support for optimize-css-assets-webpack-plugin?

[alexander-akait]

No and this should be used for postcss-loader, not for minimizer

[nolimitdev]

Alternative is https://github.com/mistakster/postcss-pipeline-webpack-plugin with wide range support:
Webpack 3.x, 4.x, 5.x and PostCSS 6.x, 7.x and 8.x branches.

[Nantris]

@alexander-akait css-minimizer-webpack-plugin yields a substantially larger output bundle. Do you have any ideas why/is this expected?

[alexander-akait]

@slapbox What you use to output CSS, maybe default options are different, also can you provide changes?

[Nantris]

I'll try to loop back to this with a diff of two output files.

As I understand it, optimize-css-assets-webpack-plugin use the CSSNano default preset, right? That's what css-minimizer-webpack-plugin uses by default. If so, I'd guess the outputs should be nearly identical, but apparently they're not.

[alexander-akait]

They used different versions of cssnano too, so output can be different... Can you try to force enable default preset?

[Nantris]

Ninja edit: Now that I've finally examined the files, it seems that the difference is that css-minimizer-webpack-plugin produces sourcemap strings in the files. I see now that css-minimizer-webpack-plugin respects the devtool option, whereas this plugin did not. **Everything looks good once devtool is disabled **

---

Original comment:
It looks like the version of cssnano in our yarn.lock is only trivially different, 5.1.12 vs 5.1.13 - but the output sizes differ even if we don't re-run yarn install, so that the cssnano version will remain the same.

Specifying the default preset for optimize-css-assets-webpack-plugin resulted in the same output - and I'd already tried the css-minimizer-webpack-plugin with both options and it appeared to be the same with or without specifying a preset.

Here's the relative sizes:

[rupeshdeotale97]

Any update so far to support webpack 5

[whitezo]

@rupeshdeotale97 read first line of Readme ;) (also came here for answers)