WebPack 4 should use "mini-css-extract-plugin" instead of "extract-text-webpack-plugin"

[ghiscoding]

I'm submitting a bug report

• Library Version:
  0.33.1

Please tell us about your environment:

• Operating System:
  Windows 10

• Node Version:
  9.11.1

• NPM Version:
  5.6.0

• Browser:
  all

• Language:
  all

• Loader/bundler:
  Webpack 4

Current behavior:

• What is the expected behavior?
  Try to run a Prod build with au build --env prod or npm run build and you will get the following warning

DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

Also on the extract-text-webpack-plugin GitHub it is mentioned that this package is deprecated with WebPack 4

Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.

• What is the motivation / use case for changing the behavior?
  Get a working build/bundle

[ghiscoding]

So it took me about 2 hours to get it working, but the good news is I got it working. I'm not sure if it's the most efficient way and if the settings are correct.

Step 1 (package.json)

in package.json do the following change

  "devDependencies": {
-    "extract-text-webpack-plugin": "^3.0.2",
+    "mini-css-extract-plugin": "^0.4.1",

Step 2 (webpack.config.js)

in webpack.config.js I changed the following

-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// ....
   module: {
     rules: [
       {
         test: /\.css$/i,
         issuer: [{ not: [{ test: /\.html$/i }] }],
-        use: extractCss ? ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: cssRules
-        }) : ['style-loader', ...cssRules],
+        use: extractCss ? [
+          {
+            loader: MiniCssExtractPlugin.loader
+          },
+          'css-loader'
+        ] : ['style-loader', ...cssRules]

// ...
     new CopyWebpackPlugin([{ from: 'assets/', to: 'assets/' }]),
-    ...when(extractCss, new ExtractTextPlugin({
+    ...when(extractCss, new MiniCssExtractPlugin({
       filename: production ? '[contenthash].css' : '[id].css',
       allChunks: true
     })),

So the good news is that if I try to do a yarn run build and/or yarn run, they both work (Dev/Prod). It would be great if Aurelia CLI would be updated to support these changes since again they do mention that the old plugin is deprecated and we should move to the new mini version

Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.

[doktordirk]

good work, but: https://github.com/webpack-contrib/mini-css-extract-plugin#readme

Advanced configuration example
This plugin should be used only on production builds without style-loader in the loaders chain, especially if you want to have HMR in development.

[ghiscoding]

Unless I'm wrong, this code ['style-loader', ...cssRules] is executed only when it's Dev (not Prod). While this portion

[
    {
        loader: MiniCssExtractPlugin.loader
    },
    'css-loader'
]

is executed for Prod build (that is when extractCss is true.

So I think it's fine

[doktordirk]

right. and seems to work fine

if you're feeling lucky maybe make a PR to adjust
https://github.com/aurelia/cli/blob/master/lib/resources/content/webpack.config.template.js
and i guess
https://github.com/aurelia/cli/blob/master/lib/dependencies.json

[stuartbale]

Might be worth considering splitting this issue into two separate ones?
One for the mini-css-extract-plugin, and the other for Tapable.plugin.
BTW - thanks for the info re: css extract. I'm sure it saved me hours of time.

[ghiscoding]

Why separate?
The Tapable.plugin error is because of ExtractTextPlugin

[stuartbale]

Hmm - are you sure? I followed your steps to remove ExtractTextPlugin, and I still get the DeprecationWarning. Perhaps there is something else you did?
I am also using HtmlWebpackPlugin, which appears to have a similar/same issue:
(see: jantimon/html-webpack-plugin#879)
so maybe that is where the difference is?

[ghiscoding]

hmm no I don't think there's anything that needs to be done. Every search on Google that points to GitHub issues, on half of them they say to use the MiniCssExtract or try updating to @latest of Text-Extract but I didn't have any luck with the later and it worked with the MiniCssExtract so I sticked with that.

You can take a look at the project, which is a demo for Aurelia-Slickgrid that is shared, anyway here's the webpack.config.js for the demo which uses latest Aurelia/Bootstrap 4/WebPack 4

and let me know if you spot anything else that should be part of this issue.

Perhaps this SO might help? Seems like this warning might not be just for the Text-Extract plugin but maybe some other ones too

[JeroenVinke]

Made the change here: e9641e4

Thanks everyone, let me know if there's anything else that has to be updated/changed

[doktordirk]

@JeroenVinke
just collection quickly

prevent eg bluebird to be included in both, vendor and app bundle

optimization: production ? {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all',
        },
      },
    },
  } : {},

don't parse json twice. needed eg for aurelia-i18n with build-in loader

 {
        type: 'javascript/auto',
        test: /\.json$/,
        use: ['json-loader'],
      },

i think over css setting isn't minifing, se needs eg

    ...when(production, new OptimizeCssAssetsPlugin({
      cssProcessorOptions: {
        safe: true,
        discardComments: { removeAll: true },
      },
    })),

it could be explored if following could be added with some useful defaults

• PreloadWebpackPlugin
• ResourceHintWebpackPlugin