Now that we understand the basics, we can move on and learn about how to practically deploy production bundles. The objectives of building a project in development mode and production mode differ greatly. In production mode, goals shift to minifying builds using lightweight source mapping and optimizing assets to improve load time. In development mode, strong source mapping is crucial, as well as having a localhost server with live reloading or hot module replacement. Due to their different purposes, it is typically recommended to write separate Webpack configurations for each mode.

A common configuration should be maintained between modes, despite their differences. To merge these configurations, a utility called webpack-merge can be used. This common configuration process means code does not need to be duplicated with each mode. Let's get started:

1. Begin by opening your command-line utility, installing webpack-merge, and saving it in development mode, as follows:

npm install --save-dev webpack-merge

2. Now, let's examine the project directory. Its contents should be structured similar to the following:

  webpack5-demo
  |- package.json
  |- webpack.config.js
  |- webpack.common.js
  |- webpack.dev.js
  |- webpack.prod.js
  |- /dist
  |- /src
    |- index.js
    |- math.js
  |- /node_modules

Note that the preceding output shows that there are extra files present in this particular example. For instance, we are including the webpack.common.js file here.

3. Let's take a closer look at the webpack.common.js file:

  const path = require('path');
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
 
  module.exports = {
    entry: {
      app: './src/index.js'
    },
    plugins: [
      // new CleanWebpackPlugin(['dist/*']) for < v2 versions of 
      // CleanWebpackPlugin
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        title: 'Production'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

The webpack.common.js file deals with CommonJS requests. It does things similarly to ECMAScript but is formatted differently. Let's ensure that the webpack.config.js file, which works in the ECMA environment, does the same thing as the CommonJS configuration file. Take note of the entry points and bundle name, as well as the title option. This latter option is the mode's counterpart, so you must ensure there is parity between both files in your project.

4. Here, we're looking inside the webpack.dev.js file:

  const merge = require('webpack-merge');
  const common = require('./webpack.common.js');
 
  module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
      contentBase: './dist'
    }
  });

As you can see, the preceding code provides instructions on how webpack.common.js should be used in development mode. This is simply a case of cross-checking for final production to ensure the content of your work is formatted correctly and will map with an error during compilation.

5. If you're working in production mode, the following file, webpack.prod.js, will be called into action:

  const merge = require('webpack-merge');
  const common = require('./webpack.common.js');
 
  module.exports = merge(common, {
    mode: 'production',
  });

Using webpack.common.js, set up entry and output configurations and include any plugins that are required for both environment modes. When using webpack.dev.js, the mode should be set to development mode. Also, add the recommended devtool to that environment, as well as the simple devServer configuration. In webpack.prod.js, the mode is, of course, set to production, which loads TerserPlugin.

Note that merge() can be used in an environment-specific configuration so that you can easily include a common configuration in development and production modes. It is also worth noting that there are a variety of advanced features available when using the webpack-merge tool.

6. Let's make those development configurations inside of webpack.common.js:

  { 
   "name": "development", 
   "version": "1.0.0", 
   "description": "", 
   "main": "src/index.js",
   "scripts": { 
   "start": "webpack-dev-server --open --config webpack.dev.js", 
   "build": "webpack --config webpack.prod.js" 
  }, 
    "keywords": [], 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
      "clean-webpack-plugin": "^0.1.17", 
      "css-loader": "^0.28.4", 
      "csv-loader": "^2.1.1", 
      "express": "^4.15.3",
      "file-loader": "^0.11.2", 
      "html-webpack-plugin": "^2.29.0", 
      "style-loader": "^0.18.2", 
      "webpack": "^5.0.0",
      "webpack-dev-middleware": "^1.12.0",
      "webpack-dev-server": "^2.9.1", 
      "webpack-merge": "^4.1.0", 
      "xml-loader": "^1.2.1"
   } 
 }

The preceding example simply shows the completed configuration for CommonJS. Note the list of plugin dependencies and their versions, which are loaded through the devDependancies option.

7. Now, run those scripts and see how the output changes. 
8. The following code shows how you can continue adding to the production configuration:

  document.body.appendChild(component());

Note that Webpack 5 will minify the project's code by default when in production mode.

TerserPlugin is a good place to start minification and should be used as the default option. There are, however, a couple of choices, such as BabelMinifyPlugin and closureWebpackPlugin.

When trying a different minification plugin, ensure that the choice will also drop any dead code, similar to tree shaking, which we described earlier in this book. Something related to tree-shaking is shimming, which we'll discuss next.