Upgrade of webpack configurations for the latest webpack version

Author: birdofpreyru

config/webpack/app-base.js

@@ -96,6 +96,7 @@ module.exports = function configFactory(ops) {
       __dirname: true,
       fs: 'empty',
     },
+    mode: o.mode,
     output: {
       chunkFilename: `[name]-${now.valueOf()}.js`,
       filename: `[name]-${now.valueOf()}.js`,
@@ -104,6 +105,7 @@ module.exports = function configFactory(ops) {
     },
     plugins: [
       new ExtractCssChunks({
+        chunkFilename: `[name]-${now.valueOf()}.js`,
         filename: `[name]-${now.valueOf()}.css`,
       }),
       new webpack.DefinePlugin({
@@ -155,9 +157,8 @@ module.exports = function configFactory(ops) {
       }, {
         /* Loads SCSS stylesheets. */
         test: /\.scss/,
-        use: ExtractCssChunks.extract({
-          fallback: 'style-loader',
-          use: [{
+        use: [
+          ExtractCssChunks.loader, {
             loader: 'css-loader',
             options: {
               localIdentName: o.cssLocalIdent,
@@ -173,16 +174,16 @@ module.exports = function configFactory(ops) {
             options: {
               sourceMap: true,
             },
-          }],
-        }),
+          },
+        ],
       }, {
         /* Loads CSS stylesheets. It is assumed that CSS stylesheets come only
         * from dependencies, as we use SCSS inside our own code. */
         test: /\.css$/,
-        use: ExtractCssChunks.extract({
-          fallback: 'style-loader',
-          use: ['css-loader'],
-        }),
+        use: [
+          ExtractCssChunks.loader,
+          'css-loader',
+        ],
       }],
     },
   };

config/webpack/app-development.js

@@ -32,6 +32,7 @@ module.exports = function configFactory(ops) {
     ...ops,
     babelEnv: 'development',
     cssLocalIdent: '[path][name]___[local]___[hash:base64:6]',
+    mode: 'development',
   }), {
     plugins: [
       new webpack.DefinePlugin({
@@ -43,7 +44,6 @@ module.exports = function configFactory(ops) {
       }),
       new webpack.HotModuleReplacementPlugin(),
       new webpack.NoEmitOnErrorsPlugin(),
-      new webpack.NamedModulesPlugin(),
     ],
   });
   if (!_.isArray(res.entry.main)) {

config/webpack/app-production.js

@@ -31,6 +31,7 @@ module.exports = function configFactory(ops) {
   return webpackMerge.smart(baseFactory({
     ...ops,
     babelEnv: 'production',
+    mode: 'production',
   }), {
     plugins: [
       new webpack.DefinePlugin({
@@ -49,14 +50,6 @@ module.exports = function configFactory(ops) {
           zindex: false,
         },
       }),
-
-      /* TODO: It tends to make problems with dynamically loaded chunks,
-      * I guess it may move some code between modules being in different
-      * chunks, thus breaking the code when they are loaded in different
-      * order. Should be further investigated. */
-      // new webpack.optimize.ModuleConcatenationPlugin(),
-
-      new webpack.optimize.UglifyJsPlugin(),
     ],
   });
 };

config/webpack/lib-base.js

@@ -55,6 +55,7 @@ module.exports = function configFactory(ops) {
       'topcoder-react-utils',
       'url-parse',
     ],
+    mode: ops.mode,
     output: {
       filename: 'index.js',
       library: ops.library,
@@ -107,9 +108,8 @@ module.exports = function configFactory(ops) {
         /* Loads SCSS stylesheets. */
         test: /\.scss/,
         exclude: /node_modules/,
-        use: ExtractCssChunks.extract({
-          fallback: 'style-loader',
-          use: [{
+        use: [
+          ExtractCssChunks.loader, {
             loader: 'css-loader',
             options: {
               importLoaders: 3,
@@ -128,16 +128,16 @@ module.exports = function configFactory(ops) {
             options: {
               sourceMap: true,
             },
-          }],
-        }),
+          },
+        ],
       }, {
         /* Loads CSS stylesheets. It is assumed that CSS stylesheets come only
         * from dependencies, as we use SCSS inside our own code. */
         test: /\.css$/,
-        use: ExtractCssChunks.extract({
-          fallback: 'style-loader',
-          use: ['css-loader'],
-        }),
+        use: [
+          ExtractCssChunks.loader,
+          'css-loader',
+        ],
       }],
     },
     resolve: {

config/webpack/lib-development.js

@@ -2,9 +2,6 @@
  * Development Webpack configuration for ReactJS libraries.
  */
 
-const webpack = require('webpack');
-const webpackMerge = require('webpack-merge');
-
 const baseFactory = require('./lib-base');
 
 /**
@@ -23,14 +20,10 @@ const baseFactory = require('./lib-base');
  * @return {Object} Webpack configuration.
  */
 module.exports = function configFactory(ops) {
-  const res = webpackMerge.smart(baseFactory({
+  return baseFactory({
     ...ops,
     babelEnv: 'development',
     cssLocalIdent: '[path][name]___[local]___[hash:base64:6]',
-  }), {
-    plugins: [
-      new webpack.NamedModulesPlugin(),
-    ],
+    mode: 'development',
   });
-  return res;
 };

config/webpack/lib-production.js

@@ -24,5 +24,6 @@ module.exports = function configFactory(ops) {
     ...ops,
     babelEnv: 'production',
     cssLocalIdent: '[hash:base64:6]',
+    mode: 'production',
   });
 };

docs/webpack-config.md

@@ -56,6 +56,7 @@ mutation of the config object.
       It allows to re-create the Webpack config during a server launch without
       re-generation of the build info file created during a previous build
       (and thus bundled into the frontend bundle). Defaults to `false`.
+    - **`mode`** – *String* – [Webpack mode](https://webpack.js.org/concepts/mode/).
     - **`publicPath`** — *String* — Base URL for the output of
       the build assets;
 
@@ -170,6 +171,8 @@ mutation of the config object.
     - **`library`** — *String* — Name of the library to be build.
       It is important for proper resolution of the library assets.
 
+    - **`mode`** – *String* – [Webpack mode](https://webpack.js.org/concepts/mode/).
+
   - The generated config will opt to:
     - References to the font assets (EOF, OTF, SVG, TTF, WOFF, WOFF2 files from
       the `src/assets/fonts` folder of the library source code) will rewritten

package-lock.json

@@ -86,6 +86,7 @@
     "stylelint": "^9.2.1",
     "stylelint-config-standard": "^18.2.0",
     "webpack": "^4.12.0",
+    "webpack-cli": "^3.0.3",
     "webpack-dev-middleware": "^3.1.3",
     "webpack-hot-middleware": "^2.22.2",
     "webpack-merge": "^4.1.2"