Webpack5

lib/client-config.js

@@ -1,7 +1,7 @@
 const path = require('path');
 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 const StatsWriterPlugin = require('webpack-stats-plugin').StatsWriterPlugin;
 
 const productionMode = 'production';
@@ -27,7 +27,10 @@ module.exports = ({ name, version }, rootPath, mode, entry, destination) => {
     },
 
     resolve: {
-      extensions: [ '.json', '.js', '.jsx' ]
+      extensions: [ '.json', '.js', '.jsx' ],
+      fallback: {
+        fs: false,
+      },
     },
 
     // Load all modules.
@@ -38,6 +41,7 @@ module.exports = ({ name, version }, rootPath, mode, entry, destination) => {
           use: {
             loader: 'babel-loader',
             options: {
+              sourceType: 'unambiguous',
               presets: [
                 [ '@babel/preset-env', {
                   targets: {
@@ -51,7 +55,10 @@ module.exports = ({ name, version }, rootPath, mode, entry, destination) => {
                 '@babel/plugin-proposal-class-properties',
                 '@babel/plugin-proposal-export-default-from',
                 '@babel/plugin-proposal-export-namespace-from',
-                '@babel/plugin-transform-runtime',
+                ['@babel/plugin-transform-runtime', {
+                  helpers: false,
+                  regenerator: true
+                }],
                 '@babel/plugin-syntax-dynamic-import'
               ],
               ignore: [ './node_modules/**/*.js' ]
@@ -74,20 +81,23 @@ module.exports = ({ name, version }, rootPath, mode, entry, destination) => {
         {
           test: /\.css$/,
           use: [
-            (mode === developmentMode ? 'style-loader' : 'css-loader'),
+            (mode === developmentMode ? 'style-loader' : MiniCssExtractPlugin.loader),
+            'css-loader',
             {
               loader: 'postcss-loader',
               options: {
-                plugins: [
-                  require('postcss-simple-vars')(),
-                  require('postcss-focus')(),
-                  require('autoprefixer')({
-                    browsers: [ 'last 2 versions', 'IE > 8' ]
-                  }),
-                  require('postcss-reporter')({
-                    clearMessages: true
-                  })
-                ]
+                postcssOptions: {
+                  plugins: [
+                    require('postcss-simple-vars')(),
+                    require('postcss-focus')(),
+                    require('autoprefixer')({
+                      overrideBrowserslist: [ 'last 2 versions', 'IE > 8' ]
+                    }),
+                    require('postcss-reporter')({
+                      clearMessages: true
+                    })
+                  ]
+                }
               }
             }
           ]
@@ -118,34 +128,27 @@ module.exports = ({ name, version }, rootPath, mode, entry, destination) => {
             chunks: 'all',
             name: 'vendors',
             priority: 10,
-            enforce: true
+            enforce: true,
+            filename: `${name}.ui.vendors.${version}.js`
           }
         }
       }
     }
   };
 
   const extractCSS = () => {
-    const cssRule = config.module.rules.find(rule => rule.test.test('foo.css'));
-    cssRule.use.unshift(MiniCssExtractPlugin.loader);
-
     config.plugins.push(
       new MiniCssExtractPlugin({
         filename: `${name}.ui.${version}.css`,
-        allChunks: true
       })
     );
   };
 
   switch (mode) {
     case productionMode:
       config.optimization.minimizer = [
-        new UglifyJsPlugin({
-          uglifyOptions: {
-            mangle: true,
-            output: {
-              comments: false
-            },
+        new TerserPlugin({
+          terserOptions: {
             compress: {
               sequences: true,
               dead_code: true,
@@ -154,10 +157,14 @@ module.exports = ({ name, version }, rootPath, mode, entry, destination) => {
               unused: true,
               if_return: true,
               join_vars: true,
-              drop_console: true,
-              warnings: false
+              drop_console: true
+            },
+            mangle: true,
+            format: {
+              comments: false
             }
-          }
+          },
+          extractComments: true
         })
       ];
 

lib/config.js

@@ -1,7 +1,7 @@
 const _ = require('lodash');
 const path = require('path');
 const semver = require('semver');
-const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 const Webpack = require('webpack');
 
 function convertDependenciesToCommonJS(dependencies) {
@@ -93,7 +93,10 @@ module.exports = (pkg, rootPath, args, ext) => {
             '@babel/plugin-proposal-class-properties',
             '@babel/plugin-proposal-export-default-from',
             '@babel/plugin-proposal-export-namespace-from',
-            '@babel/plugin-transform-runtime',
+            ['@babel/plugin-transform-runtime', {
+              helpers: false,
+              regenerator: true
+            }],
             '@babel/plugin-syntax-dynamic-import'
           ]
         }
@@ -102,22 +105,6 @@ module.exports = (pkg, rootPath, args, ext) => {
     });
   }
 
-  activePlugins.push(
-    new UglifyJSPlugin({
-      uglifyOptions: {
-        ecma,
-        compress: {
-          warnings: false,
-          unused: true,
-          dead_code: true
-        },
-        output: {
-          comments: false
-        }
-      }
-    })
-  );
-
   activePlugins.push(
     new Webpack.DefinePlugin({
       'process.env': settings
@@ -135,18 +122,34 @@ module.exports = (pkg, rootPath, args, ext) => {
   // Return config.
   return {
     entry: path.join(rootPath, args.entryPoint),
-    mode: 'none',
+    mode: 'production',
     target: 'node',
     output: {
       path: path.join(rootPath, args.destinationFolder),
       filename: `${pkg.name}.extension.${pkg.version}.js`,
-      library: `${pkg.name}.extension`,
       libraryTarget: 'commonjs2'
     },
     externals: externals.compatible,
     module: {
       rules: activeLoaders
     },
+    optimization: {
+      minimizer: [
+        new TerserPlugin({
+          terserOptions: {
+            ecma,
+            compress: {
+              unused: true,
+              dead_code: true
+            },
+            format: {
+              comments: false
+            }
+          },
+          extractComments: false
+        })
+      ]
+    },
     plugins: activePlugins,
     resolve: {
       modules: [

lib/dev-server.js

@@ -10,42 +10,38 @@ module.exports = (rootPath, entry, destination, port = 3000, proxyPort = 3001) =
     const mode = 'development';
     const compiler = webpack(getConfig({ name: 'dev-client', version: '0' }, rootPath, mode, entry, destination));
     const options = {
-      publicPath: `http://localhost:${port}/app/`,
-      disableHostCheck: true,
+      host: 'localhost',
+      port,
       hot: true,
-      inline: true,
       historyApiFallback: true,
+      allowedHosts: 'all',
+      devMiddleware: {
+        publicPath: `http://localhost:${port}/app/`,
+        stats: { colors: true }
+      },
+      client: {
+        logging: 'info'
+      },
       proxy: [
         {
           context: () => true,
-          target: {
-            port: proxyPort
-          }
+          target: `http://localhost:${proxyPort}`
         }
       ],
-
-      quiet: false,
-      noInfo: true,
-      watchOptions: {
-        aggregateTimeout: 300,
-        poll: 1000
-      },
-
-      stats: { colors: true },
       headers: {
         'Access-Control-Allow-Origin': '*'
       }
     };
 
-    new WebpackDevServer(compiler, options)
-      .listen(port, 'localhost',
-        (err) => {
-          if (err) {
-            console.error(err);
-            return reject(err);
-          } else {
-            console.info(`Development server listening on: http://localhost:${port}`);
-            return resolve();
-          }
-        });
+    const server = new WebpackDevServer(options, compiler);
+
+    server.startCallback((err) => {
+      if (err) {
+        console.error(err);
+        return reject(err);
+      } else {
+        console.info(`Development server listening on: http://localhost:${port}`);
+        return resolve();
+      }
+    });
   });