There are several prerequisites to go over before we begin migrating our project from Webpack version 3 to 4. These involve the following:

• Node.js
• The CLI
• Plugins
• Modes

For developers using Node.js version 4 or lower, upgrading to Node.js version 6 or higher is necessary. In terms of the command line, the CLI has moved to a separate package, called webpack-cli. You need to install it before using Webpack 4.

When updating plugins, many third-party plugins need to be upgraded to their latest version to be compatible, so please be aware of that. It is also a good idea to peruse your project to find the ones that need updating. Also, be sure to add the new mode option to your configuration:

1. Begin by setting the mode in your configuration to production or development, depending on the configuration type, as in the following code snippet, using webpack.config.js:

module.exports = {
    mode: 'production',
}

There is an alternative method, which can be done by passing the mode using the CLI, such as with the following example:

--mode production

The preceding example shows the latter part of any Webpack command for the production mode made through the command line. The following example shows the same for the development mode:

--mode development

2. The next step is the removal of deprecated plugins; the plugins should be removed from your configuration file as they are default in production mode. The following example will show you how to make the edit in webpack.config.js:

module.exports = {
 plugins: [
   new NoEmitOnErrorsPlugin(),
   new ModuleConcatenationPlugin(),
   new DefinePlugin({ "process.env.NODE_ENV":
     JSON.stringify("production") })
   new UglifyJsPlugin()
 ],
}

The following example gives you a view of how this works in development mode. Note that the plugins are the default in development mode, again using webpack.config.js:

module.exports = {
 plugins: [
   new NamedModulesPlugin()
 ],
}

3. If that was done correctly, you will see that the depreciated plugins have been removed. Your configuration file, webpack.config.js, should look something like the following:

module.exports = {
 plugins: [
   new NoErrorsPlugin(),
   new NewWatchingPlugin()
 ],
}

Also, CommonChunkPlugin was removed in this process with the optimization.splitChunks options offered as an alternative in Webpack 4.0.

If you are generating HTML from stats, optimization.splitChunks.chunks: "all" can now be used—this is the optimal configuration in most cases.

There is also some work to be done regarding import() and CommonJS. When using import() to load any non-ESM scripts, the result has changed in Webpack 4:

1. Now, you need to access the default property to get the value of module.exports. See the non-esm.js file here to see this in action:

module.exports = {
      sayHello: () => {
       console.log('Hello World');
     }
 };

This is a simple JavaScipt function and you can replicate its contents to follow the demonstration and see how the results have changed.

2. The next file is an example.js file. It can be called anything you want and you can perform any action you want. In this example, it is a simple sayHello(); function:

function sayHello() {
 import('./non-esm.js').then(module => {
  module.default.sayHello();
 });
}

These blocks show how to code simple functions with CommonJS. You should apply this convention to your existing code to ensure it doesn't break.

3. When using a custom loader to transform .json files, you now need to change the module type in webpack.config.js:

module.exports = {
 rules: [
  {
    test: /config.json$/,
    loader: 'special-loader',
    type: 'javascript/auto',
    options: {...}
  }
 ]
};

4. Even when using json-loader, it can be removed; see the following example:

module.exports = {
  rules: [
   {
     test: /.json$/,
     loader: 'json-loader'
   }
  ]
};

Once this is done, all of the required migration prerequisites will have been done. The next step is the automated updating process, which is built into Webpack.