Webpack-encore: How to configure mini-css-extract-plugin

[fanchyfanch]

In our Symfony 4.4 project, we're using "@symfony/webpack-encore": "0.28.2" and got the Conflicting order between: warning when compiling.

The Github of the plugin says to put the flag IgnoreOrder to _true_ in the configuration of the plugin.

But this one is automatically loaded by Webpack and I don't know how to access its configuration, the Symfony docs is not really helpful about that.

Also, I came accross all my search on that comment that shows a configureMiniCssExtractPlugin method that would be really helpful in what we're trying to do but I can't find it anywhere in the master of the Encore file.

Has someone already succeeded in resolving this kind of problem?

Thanks in advance for your explanations about it.

[Kocal]

Hi :wave:

Actually it's not possible to configure MiniCssExtractPlugin options, which are defined here https://github.com/symfony/webpack-encore/blob/v0.28.2/lib/plugins/mini-css-extract.js#L42-L45

I think we can add a new method .configureMiniCssExtractPlugin which will be usable like this:

Encore
  .configureMiniCssExtractPlugin(options => {
    options.ignoreOrder = true
  });

But maybe it will be a _better_ idea to add a method to configure whatever plugin options? Something similar to .configureLoaderRule?

Encore
  .confgurePlugin('mini-css-extract', options => {
    options.ignoreOrder = true
  });

What do you think @Lyrkan?

[fanchyfanch]

Damned! We're writing in english whereas we're all in France. 😆

[Lyrkan]

That's actually something I did in https://github.com/symfony/webpack-encore/pull/645

I originally wanted to ship it with a mini-css-extract-plugin update in https://github.com/symfony/webpack-encore/pull/564 but there was some issues that seem to be fixed only in Webpack 5 so the first PR was closed.

As I said here I don't have any objection about moving that part in its own PR... I left it in the Webpack 5 one to make sure that it will be available when we will start using the new hmr option.

That being said both solutions have their pros/cons... but what I like with methods such as configureMiniCssExtractPlugin() is that:

• we can document how to use them with examples, links to the plugin repository, etc.
• they can easily be found using IDEs autocompletion

Some plugins may also not be configurable like others... for instance that one also comes with a loader that has its own options, and it's probably a nice thing to be able to change both of them in a single call.