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

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]

@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