Upgrade to webpack 5

Author: Tania Rascia

README.md

@@ -1,8 +1,8 @@
-# 📦 Webpack Boilerplate
+# 📦 webpack Boilerplate
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) ![David](https://img.shields.io/david/dev/taniarascia/webpack-boilerplate)
 
-Sensible Webpack 4 boilerplate using Babel and PostCSS with HMR development server and an optimized production build.
+Sensible webpack 5 boilerplate using Babel, PostCSS and Sass with a hot dev server and an optimized production build.
 
 ## Installation
 
@@ -42,48 +42,45 @@ cd dist && http-server
 
 ## Features
 
-- [Webpack](https://webpack.js.org/)
+- [webpack](https://webpack.js.org/)
 - [Babel](https://babeljs.io/)
 - [Sass](https://sass-lang.com/)
 - [PostCSS](https://postcss.org/)
 
 ## Dependencies
 
-### Webpack
+### webpack
 
 - [`webpack`](https://github.com/webpack/webpack) - Module and asset bundler.
-- [`webpack-cli`](https://github.com/webpack/webpack-cli) - Command line interface for Webpack.
-- [`webpack-dev-server`](https://github.com/webpack/webpack-dev-server) - Development server for Webpack.
+- [`webpack-cli`](https://github.com/webpack/webpack-cli) - Command line interface for webpack.
+- [`webpack-dev-server`](https://github.com/webpack/webpack-dev-server) - Development server for webpack.
 - [`webpack-merge`](https://github.com/survivejs/webpack-merge) - Simplify development/production configuration
 - [`cross-env`](https://github.com/kentcdodds/cross-env) - Cross platform configuration.
 
 ### Babel
 
-- [`@babel/core`](https://www.npmjs.com/package/@babel/core) - Transpile ES6+ to backwards compatible JavaScript.
-- [`@babel/plugin-proposal-class-properties`](https://babeljs.io/docs/en/babel-plugin-proposal-class-properties) - Use properties directly on a class. (example Babel config)
-- [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) - Smart defaults for Babel.
+- [`@babel/core`](https://www.npmjs.com/package/@babel/core) - Transpile ES6+ to backwards compatible JavaScript
+- [`@babel/plugin-proposal-class-properties`](https://babeljs.io/docs/en/babel-plugin-proposal-class-properties) - Use properties directly on a class (an example Babel config)
+- [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) - Smart defaults for Babel
 
 ### Loaders
 
-- [`babel-loader`](https://webpack.js.org/loaders/babel-loader/) - Transpile files with Babel and Webpack.
-- [`sass-loader`](https://webpack.js.org/loaders/sass-loader/) - Load SCSS and compile to CSS.
-  - [`node-sass`](https://github.com/sass/node-sass) - Node Sass.
-- [`postcss-loader`](https://webpack.js.org/loaders/postcss-loader/) - Process CSS with PostCSS.
-  - [`cssnano`](https://github.com/cssnano/cssnano) - Optimize and compress PostCSS.
-  - [`postcss-preset-env`](https://www.npmjs.com/package/postcss-preset-env) - Sensible defaults for PostCSS.
-- [`css-loader`](https://webpack.js.org/loaders/css-loader/) - Resolves CSS imports into JS.
-- [`style-loader`](https://webpack.js.org/loaders/style-loader/) - Inject CSS into the DOM.
-- [`file-loader`](https://webpack.js.org/loaders/file-loader/) - Allow import of files and emit file to build folder.
-- [`url-loader`](https://webpack.js.org/loaders/url-loader/) - Encode and inline files. Falls back to file-loader.
+- [`babel-loader`](https://webpack.js.org/loaders/babel-loader/) - Transpile files with Babel and webpack
+- [`sass-loader`](https://webpack.js.org/loaders/sass-loader/) - Load SCSS and compile to CSS
+  - [`node-sass`](https://github.com/sass/node-sass) - Node Sass
+- [`postcss-loader`](https://webpack.js.org/loaders/postcss-loader/) - Process CSS with PostCSS
+  - [`postcss-preset-env`](https://www.npmjs.com/package/postcss-preset-env) - Sensible defaults for PostCSS
+- [`css-loader`](https://webpack.js.org/loaders/css-loader/) - Resolve CSS imports
+- [`style-loader`](https://webpack.js.org/loaders/style-loader/) - Inject CSS into the DOM
 
 ### Plugins
 
-- [`clean-webpack-plugin`](https://github.com/johnagan/clean-webpack-plugin) - Remove/clean build folders.
-- [`copy-webpack-plugin`](https://github.com/webpack-contrib/copy-webpack-plugin) - Copy files to build directory.
-- [`html-webpack-plugin`](https://github.com/jantimon/html-webpack-plugin) - Generate HTML files from template.
-- [`mini-css-extract-plugin`](https://github.com/webpack-contrib/mini-css-extract-plugin) - Extract CSS into separate files.
-- [`optimize-css-assets-webpack-plugin`](https://github.com/NMFR/optimize-css-assets-webpack-plugin) - Optimize and minimize CSS assets.
-- [`terser-webpack-plugin`](https://github.com/webpack-contrib/terser-webpack-plugin) - Minify JavaScript.
+- [`clean-webpack-plugin`](https://github.com/johnagan/clean-webpack-plugin) - Remove/clean build folders
+- [`copy-webpack-plugin`](https://github.com/webpack-contrib/copy-webpack-plugin) - Copy files to build directory
+- [`html-webpack-plugin`](https://github.com/jantimon/html-webpack-plugin) - Generate HTML files from template
+- [`mini-css-extract-plugin`](https://github.com/webpack-contrib/mini-css-extract-plugin) - Extract CSS into separate files
+- [`optimize-css-assets-webpack-plugin`](https://github.com/NMFR/optimize-css-assets-webpack-plugin) - Optimize and minimize CSS assets
+- [`terser-webpack-plugin`](https://github.com/webpack-contrib/terser-webpack-plugin) - Optimize and minimize JavaScript
 
 ## Author
 

config/paths.js

@@ -1,7 +1,12 @@
 const path = require('path')
 
 module.exports = {
-  src: path.resolve(__dirname, '../src'), // source files
-  build: path.resolve(__dirname, '../dist'), // production build files
-  static: path.resolve(__dirname, '../public'), // static files to copy to build folder
+  // Source files
+  src: path.resolve(__dirname, '../src'),
+
+  // Production build files
+  build: path.resolve(__dirname, '../dist'),
+
+  // Static files that get copied to build folder
+  public: path.resolve(__dirname, '../public'),
 }

config/webpack.common.js

@@ -1,49 +1,30 @@
 const paths = require('./paths')
-const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+
+const {CleanWebpackPlugin} = require('clean-webpack-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 
 module.exports = {
-  /**
-   * Entry
-   *
-   * The first place Webpack looks to start building the bundle.
-   */
+  // Where weback looks to start building the bundle
   entry: [paths.src + '/index.js'],
 
-  /**
-   * Output
-   *
-   * Where Webpack outputs the assets and bundles.
-   */
+  // Where webpack outputs the assets and bundles
   output: {
     path: paths.build,
     filename: '[name].bundle.js',
     publicPath: '/',
   },
 
-  /**
-   * Plugins
-   *
-   * Customize the Webpack build process.
-   */
+  // Customize the webpack build process
   plugins: [
-    /**
-     * CleanWebpackPlugin
-     *
-     * Removes/cleans build folders and unused assets when rebuilding.
-     */
+    // Removes/cleans build folders and unused assets when rebuilding
     new CleanWebpackPlugin(),
 
-    /**
-     * CopyWebpackPlugin
-     *
-     * Copies files from target to destination folder.
-     */
+    // Copies files from target to destination folder
     new CopyWebpackPlugin({
       patterns: [
         {
-          from: paths.static,
+          from: paths.public,
           to: 'assets',
           globOptions: {
             ignore: ['*.DS_Store'],
@@ -52,80 +33,38 @@ module.exports = {
       ],
     }),
 
-    /**
-     * HtmlWebpackPlugin
-     *
-     * Generates an HTML file from a template.
-     */
+    // Generates an HTML file from a template
+    // Generates deprecation warning: https://github.com/jantimon/html-webpack-plugin/issues/1501
     new HtmlWebpackPlugin({
-      title: 'Webpack Boilerplate',
-      favicon: paths.static + '/favicon.png',
+      title: 'webpack Boilerplate',
+      favicon: paths.src + '/images/favicon.png',
       template: paths.src + '/template.html', // template file
       filename: 'index.html', // output file
     }),
   ],
 
-  /**
-   * Module
-   *
-   * Determine how modules within the project are treated.
-   */
+  // Determine how modules within the project are treated
   module: {
     rules: [
-      /**
-       * JavaScript
-       *
-       * Use Babel to transpile JavaScript files.
-       */
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        use: ['babel-loader'],
-      },
+      // JavaScript: Use Babel to transpile JavaScript files
+      {test: /\.js$/, exclude: /node_modules/, use: ['babel-loader']},
 
-      /**
-       * Styles
-       *
-       * Inject CSS into the head with source maps.
-       */
+      // Styles: Inject CSS into the head with source maps
       {
         test: /\.(scss|css)$/,
         use: [
           'style-loader',
-          { loader: 'css-loader', options: { sourceMap: true, importLoaders: 1 } },
-          { loader: 'postcss-loader', options: { sourceMap: true } },
-          { loader: 'sass-loader', options: { sourceMap: true } },
+          {loader: 'css-loader', options: {sourceMap: true, importLoaders: 1}},
+          {loader: 'postcss-loader', options: {sourceMap: true}},
+          {loader: 'sass-loader', options: {sourceMap: true}},
         ],
       },
 
-      /**
-       * Images
-       *
-       * Copy image files to build folder.
-       */
-      {
-        test: /\.(?:ico|gif|png|jpg|jpeg|webp|svg)$/i,
-        loader: 'file-loader',
-        options: {
-          name: '[path][name].[ext]',
-          context: 'src', // prevent display of src/ in filename
-        },
-      },
+      // Images: Copy image files to build folder
+      {test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource'},
 
-      /**
-       * Fonts
-       *
-       * Inline font files.
-       */
-      {
-        test: /\.(woff(2)?|eot|ttf|otf|)$/,
-        loader: 'url-loader',
-        options: {
-          limit: 8192,
-          name: '[path][name].[ext]',
-          context: 'src', // prevent display of src/ in filename
-        },
-      },
+      // Fonts and SVGs: Inline files
+      {test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline'},
     ],
   },
 }

config/webpack.dev.js

@@ -1,28 +1,17 @@
 const paths = require('./paths')
+
 const webpack = require('webpack')
-const {merge} = require('webpack-merge')
+const { merge } = require('webpack-merge')
 const common = require('./webpack.common.js')
 
 module.exports = merge(common, {
-  /**
-   * Mode
-   *
-   * Set the mode to development or production.
-   */
+  // Set the mode to development or production
   mode: 'development',
 
-  /**
-   * Devtool
-   *
-   * Control how source maps are generated.
-   */
+  // Control how source maps are generated
   devtool: 'inline-source-map',
 
-  /**
-   * DevServer
-   *
-   * Spin up a server for quick development.
-   */
+  // Spin up a server for quick development
   devServer: {
     historyApiFallback: true,
     contentBase: paths.build,
@@ -33,11 +22,7 @@ module.exports = merge(common, {
   },
 
   plugins: [
-    /**
-     * HotModuleReplacementPlugin
-     *
-     * Only update what has changed.
-     */
+    // Only update what has changed on hot reload
     new webpack.HotModuleReplacementPlugin(),
   ],
 })

config/webpack.prod.js

@@ -1,27 +1,22 @@
 const paths = require('./paths')
-const {merge} = require('webpack-merge')
+const { merge } = require('webpack-merge')
 const common = require('./webpack.common.js')
+
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const TerserJSPlugin = require('terser-webpack-plugin')
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const TerserPlugin = require('terser-webpack-plugin')
 
 module.exports = merge(common, {
   mode: 'production',
   devtool: false,
   output: {
     path: paths.build,
     publicPath: '/',
-    filename: '[name].[contenthash].bundle.js',
+    filename: 'js/[name].[contenthash].bundle.js',
   },
   plugins: [
-    /**
-     * MiniCssExtractPlugin
-     *
-     * Extracts CSS into separate files.
-     *
-     * Note: style-loader is for development, MiniCssExtractPlugin is for production.
-     * They cannot be used together in the same config.
-     */
+    // Extracts CSS into separate files
+    // Note: style-loader is for development, MiniCssExtractPlugin is for production
     new MiniCssExtractPlugin({
       filename: 'styles/[name].[contenthash].css',
       chunkFilename: '[id].css',
@@ -36,7 +31,8 @@ module.exports = merge(common, {
           {
             loader: 'css-loader',
             options: {
-              importLoaders: 1,
+              importLoaders: 2,
+              sourceMap: false,
             },
           },
           'postcss-loader',
@@ -45,28 +41,14 @@ module.exports = merge(common, {
       },
     ],
   },
-
-  /**
-   * Optimization
-   *
-   * Production minimizing of JavaSvript and CSS assets.
-   */
   optimization: {
-    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
+    minimize: true,
+    minimizer: [new OptimizeCssAssetsPlugin(), new TerserPlugin()],
     // Once your build outputs multiple chunks, this option will ensure they share the webpack runtime
     // instead of having their own. This also helps with long-term caching, since the chunks will only
     // change when actual code changes, not the webpack runtime.
-    runtimeChunk: 'single',
-    // This breaks apart commonly shared deps (react, semantic ui, etc) into one shared bundle. React, etc
-    // won't change as often as the app code, so this chunk can be cached separately from app code.
-    splitChunks: {
-      cacheGroups: {
-        vendor: {
-          test: /[\\/]node_modules[\\/](react|react-dom|lodash)[\\/]/,
-          name: 'vendors',
-          chunks: 'all',
-        },
-      },
+    runtimeChunk: {
+      name: 'runtime',
     },
   },
   performance: {