upgrade to webpack 5

Author: waldronmatt

README.md

@@ -1,6 +1,6 @@
 # MixPack
 
-[![Netlify Status](https://api.netlify.com/api/v1/badges/981f8252-c7bd-4215-8b05-60aee8402a2d/deploy-status)](https://app.netlify.com/sites/mixpack/deploys) ![webpack](https://img.shields.io/badge/webpack-4.44.1-green)
+[![Netlify Status](https://api.netlify.com/api/v1/badges/981f8252-c7bd-4215-8b05-60aee8402a2d/deploy-status)](https://app.netlify.com/sites/mixpack/deploys) ![webpack](https://img.shields.io/badge/webpack-5.0.0-green)
 
 A mixed TypeScript/JavaScript Webpack boilerplate with Express. [Click here to see it live on Netlify](https://mixpack.netlify.app).
 
@@ -85,9 +85,6 @@ Visualize Webpack output
 - webpack: module and asset bundler
 - webpack-cli: command line interface for Webpack
 - webpack-merge: simplify development/production configuration
-- webpack-hot-middleware: add hot-reloading capabilities to Express without webpack-dev-server
-- webpack-dev-middleware: serves the files emitted from Webpack over Express.
-- webpack-livereload-plugin: trigger reloads from Webpack's build pipeline for html includes inside EJS template
 - webpack-node-externals: exclude node modules in Webpack
 
 ### Loaders
@@ -109,18 +106,15 @@ Visualize Webpack output
   - PreloadWebpackPlugin
   - FaviconsWebpackPlugin
 - Minifiers
-  - TerserPlugin
-  - OptimizeCSSAssetsPlugin
+  - TerserPlugin (Comes bundled with Webpack)
+  - CssMinimizerWebpackPlugin
   - ImageminPlugin
 - Linters
   - ESLintPlugin
   - StylelintPlugin
-- Build Optimizers
-  - HardSourceWebpackPlugin
 - Miscellaneous
   - Webpack Bundle Analyzer
-  - LiveReloadPlugin (for EJS includes)
-  - imagemin/imagemin-webp - (non-Webpack Plugins)
+  - imagemin-webp - (separately generate webp images)
 
 ### Transpilers/Tools
 - Babel: transpile modern JavaScript into browser recognizable JavaScript
@@ -138,6 +132,7 @@ Visualize Webpack output
 ### Back-end Tools
 - Express: server framework for Node.js
 - serverless-http: allows you to 'wrap' your API for serverless use (used for hosting on Netlify)
+- webpack-dev-server: development server that provides live reloading
 
 ### Testing
 - Jest - JavaScript testing framework

package.json

@@ -8,8 +8,8 @@
     "coverage": "jest --coverage",
     "optimize": "node ./scripts/optimize-images.js",
     "analyze": "webpack --json --config ./scripts/webpack.prod.js > stats.json && webpack-bundle-analyzer --port 8080 stats.json",
-    "dev": "rm -rf dist && webpack --mode development --config ./scripts/webpack.server.config.js && webpack --mode development --config ./scripts/webpack.dev.js && node ./dist/server.js",
-    "build": "rm -rf dist && webpack --mode production --config ./scripts/webpack.server.config.js && webpack --mode production --config ./scripts/webpack.prod.js",
+    "dev": "rm -rf dist && webpack serve --mode development --config ./scripts/webpack.dev.js",
+    "build": "rm -rf dist && webpack --config ./scripts/webpack.server.config.js && webpack --mode production --config ./scripts/webpack.prod.js",
     "serve": "node ./dist/server.js"
   },
   "keywords": [
@@ -43,6 +43,7 @@
     "babel-jest": "^26.5.2",
     "babel-loader": "^8.1.0",
     "css-loader": "^4.2.1",
+    "css-minimizer-webpack-plugin": "^1.1.5",
     "dart-sass": "^1.25.0",
     "eslint": "^7.11.0",
     "eslint-config-airbnb-base": "^14.2.0",
@@ -54,16 +55,14 @@
     "favicons-webpack-plugin": "^4.2.0",
     "file-loader": "^6.0.0",
     "font-loader": "^0.1.2",
-    "hard-source-webpack-plugin": "^0.13.1",
     "html-loader": "^1.3.2",
-    "html-webpack-plugin": "^4.3.0",
+    "html-webpack-plugin": "^5.0.0-alpha.6",
     "imagemin": "^7.0.1",
     "imagemin-webp": "^6.0.0",
     "imagemin-webpack-plugin": "^2.4.2",
     "jest": "^26.4.1",
     "jest-transform-stub": "^2.0.0",
     "mini-css-extract-plugin": "^0.10.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
     "postcss": "^8.1.2",
     "postcss-import": "^13.0.0",
     "postcss-loader": "^4.0.4",
@@ -80,17 +79,14 @@
     "stylelint-order": "^4.1.0",
     "stylelint-scss": "^3.18.0",
     "stylelint-webpack-plugin": "^2.1.1",
-    "terser-webpack-plugin": "^3.0.0",
     "ts-jest": "^26.4.1",
     "ts-loader": "^8.0.5",
     "typescript": "^4.0.3",
     "url-loader": "^4.1.0",
-    "webpack": "^4.44.1",
+    "webpack": "^5.0.0-rc.6",
     "webpack-bundle-analyzer": "^3.9.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-middleware": "^3.7.2",
-    "webpack-hot-middleware": "^2.25.0",
-    "webpack-livereload-plugin": "^2.3.0",
+    "webpack-cli": "^4.2.0",
+    "webpack-dev-server": "^3.11.0",
     "webpack-merge": "^5.2.0",
     "webpack-node-externals": "^2.5.1"
   }

scripts/webpack.dev.js

@@ -1,47 +1,65 @@
 const path = require('path');
+const chokidar = require('chokidar');
 const webpack = require('webpack');
 const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');
-const LiveReloadPlugin = require('webpack-livereload-plugin');
 const ESLintPlugin = require('eslint-webpack-plugin');
 const StylelintPlugin = require('stylelint-webpack-plugin');
-const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
+const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
 
 module.exports = (env, argv) => {
   const config = {
     mode: argv.mode,
     // Map your compiled code back to your original source code.
     devtool: 'inline-source-map',
     target: 'web',
-    entry: {
-      main: [
-        'webpack/hot/dev-server',
-        'webpack-hot-middleware/client',
-      ],
-    },
     output: {
       filename: '[name].js',
       // specify chunck path for code splitted files
       chunkFilename: '[name].js',
     },
-    plugins: [
+    devServer: {
       /*
-        Provides an intermediate caching step for modules
-        Not using on prod builds because Netlify stalls out a while
+        We're using chokidar to watch for html includes so reloading can occur automatically.
+        Why use this method?
+        - webpack-live-reload does not support Webpack 5 as of 11/2020
+        - webpack-dev-server uses chokidar internally so we don't have to install an extra dependency
+
+        https://stackoverflow.com/questions/52322913/webpack-4-devserver-hmr-plus-full-reload-on-other-file-changes-like-views
       */
-      new HardSourceWebpackPlugin(),
-      new LiveReloadPlugin({
-        appendScriptTag: true,
-      }),
+      before(app, server) {
+        chokidar.watch([
+          './src/pages/**/**'
+        ]).on('all', function() {
+          server.sockWrite(server.sockets, 'content-changed');
+        })
+      },
+      historyApiFallback: true,
+      contentBase: path.resolve(__dirname, '../dist'),
+      publicPath: '/',
+      open: true,
+      compress: true,
+      hot: true,
+      port: 8080,
+    },
+    plugins: [
       new ESLintPlugin({
         extensions: ['js', 'ts'],
       }),
       new StylelintPlugin(),
+      new FaviconsWebpackPlugin({
+        mode: 'light',
+      }),
       new webpack.HotModuleReplacementPlugin(),
     ],
     optimization: {
       // don't minimize so we can debug
       minimize: false,
+      /*
+        The value 'single' instead creates a runtime file to be shared for all generated chunks.
+        https://github.com/webpack/webpack-dev-server/issues/2792
+      */
+      runtimeChunk: "single",
     },
   };
   return merge(common(env, argv), config);

scripts/webpack.prod.js

@@ -2,8 +2,7 @@ const path = require('path');
 const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
-const TerserPlugin = require('terser-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
 const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
 const ImageminPlugin = require('imagemin-webpack-plugin').default;
 
@@ -20,42 +19,22 @@ module.exports = (env, argv) => {
     },
     plugins: [
       // generate optimized favicons for different devices
-      new FaviconsWebpackPlugin(),
+      new FaviconsWebpackPlugin({
+        // remove mode to enable default 'webp' for comprehensive favicon generation
+        mode: 'light',
+      }),
       // where the compiled scss is saved to
       new MiniCssExtractPlugin({
         filename: '[name].[contenthash:8].css',
       }),
-      // compress images
-      new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i }),
     ],
     optimization: {
       minimize: true,
       minimizer: [
-        // minimize js
-        /*
-          Are you getting a 'TypeError: Cannot read property 'javascript' of undefined' from terser when running a build?
-          Was it because you upgraded? If so, downgrade back to v3.0.0
-        */
-        new TerserPlugin({
-          // https://github.com/webpack-contrib/terser-webpack-plugin/#remove-comments
-          terserOptions: {
-            output: {
-              comments: false,
-            },
-          },
-          extractComments: false,
-        }),
-        // minimize css
-        new OptimizeCSSAssetsPlugin({
-          // remove comments
-          cssProcessorPluginOptions: {
-            preset: ['default', {
-              discardComments: {
-                removeAll: true,
-              },
-            }],
-          },
-        }),
+        // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`)
+        '...',
+        new CssMinimizerPlugin(),
+        new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i }),
       ],
       // Webpack will identify any code it thinks isn’t being used and mark it during the initial bundling step
       usedExports: true, // Set TRUE to enable tree-shaking

scripts/webpack.server.config.js

@@ -2,11 +2,9 @@
 const nodeExternals = require('webpack-node-externals');
 
 module.exports = (env, argv) => {
-  const SERVER_PATH = (argv.mode === 'production') ? './scripts/server-prod.js' : './scripts/server-dev.js';
-
   return {
       entry: {
-        server: SERVER_PATH,
+        server: './scripts/server-prod.js',
       },
       /*
         if you don't put this as, __dirname and __filename return blank or /

src/pages/template.ejs

@@ -2,7 +2,6 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <link rel="icon" href="data:;base64,=">
   <title><%= htmlWebpackPlugin.options.title %></title>
   <meta name="description" content="<%= htmlWebpackPlugin.options.description %>">
 </head>