There are numerous steps that must be taken to ensure the update of Webpack behaves correctly. The steps that concern our example are as follows:

• Upgrade and install.
• Add the modes to your configuration files.
• Add fork checkers.
• Manually update relevant plugins, loaders, and utilities.
• Reconfigure uglify.
• Trace any further errors and make the update.

Let's go over each step in detail and explore what exactly is going on with the command line. It should help you to understand the procedure a lot better:

1. The first thing we need to do is upgrade Webpack and install webpack-cli. This is done in the command line, as follows:

yarn add webpack
yarn add webpack-cli

2. The preceding example shows how this is done using yarn; it will also give a version check. This should also be visible in the package.json file:

...
"webpack": "^5.0.0",
"webpack-cli": "^3.2.3",
...

3. Once this is done, the respective modes should be added to webpack.config.dev.js and webpack.config.prod.js. See the following webpack.config.dev.js file:

module.exports = {
mode: 'development',

A similar thing is done with the production configuration, as we have two configuration files here for each mode. The following shows the contents of the webpack.config.prod.js file:

module.exports = {
mode: 'production',

We are dealing with two versions—the older version (3) and the newer version (4). If this was done manually, you might first make a fork of the original version. The term fork refers to the icon usually associated with this operation, which represents one line splitting away from the other to appear as a two-pronged fork. So, the term fork has come to mean a subversion. Fork checkers will automatically check each version for differences that need to be updated as part of the operation.

4. Now, go back to the command line to add the following fork checkers:

add fork-ts-checker-notifier-webpack-plugin
yarn add fork-ts-checker-notifier-webpack-plugin --dev

 The following should be seen in the package.json file:

...
"fork-ts-checker-notifier-webpack-plugin": "^1.0.0",
...

The preceding code block shows that the fork checker has been installed.

5. Now, we need to update html-webpack-plugin with the command line:

yarn add html-webpack-plugin@next

package.json should now show the following:

"html-webpack-plugin": "^4.0.0-beta.5",

Now, we need to adjust the plugin order in the webpack.config.dev.js and webpack.config.prod.js files.

6. You should take these steps to ensure that HtmlWebpackPlugin comes before InterpolateHtmlPlugin and InterpolateHtmlPlugin are declared, as in the following example:

plugins: [
 new HtmlWebpackPlugin({
   inject: true,
   template: paths.appHtml
 }),
 new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),

7. Also, be sure to update ts-loader, url-loader, and file-loader in the command line:

yarn add url-loader file-loader ts-loader

8. The package.json file holds information on the versions used, in terms of the previously mentioned loaders, and should look as in the following:

"file-loader": "^1.1.11",
"ts-loader": "4.0.0",
"url-loader": "0.6.2",

If you're using React, then you will need to update the development utilities, as follows:

yarn add react-dev-utils

Again, the package.json file will hold the version information for the React utility in use:

"react-dev-utils": "6.1.1",

extract-text-webpack-plugin should be substituted with mini-css-extract-plugin. 

9. Take note that extract-text-webpack-plugin should be removed altogether while adding and configuring mini-css-extract-plugin:

yarn add mini-css-extract-plugin

10. The package.json file with version settings for the plugin should look as in the following for this example:

"mini-css-extract-plugin": "^0.5.0",
Config:

11. With all this done, we should then take a look at the production mode configurations. This is done with the following webpack.config.prod.js file:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
plugins: [
 ...
 new MiniCssExtractPlugin({
   filename: "[name].css",
   chunkFilename: "[id].css"
 }),
 ...
 ],
 module: {
   rules: [
    {
     test: /.css$/,
     use: [
     {
       loader: MiniCssExtractPlugin.loader,
       options: {
       // you can specify a publicPath here
       // by default it use publicPath in webpackOptions.output
       publicPath: '../'
     }
    },
    "css-loader"
   ]
 },

We can see some differences in webpack.config.prod.js between versions. The preceding gives you a look at the format for configuration when in version 4.

12. Next, be sure to update and reconfigure uglifyjs-webpack-plugin using the command line and the package.json file:

yarn add uglifyjs-webpack-plugin --dev

13. In the interests of prudence, we will also show the version settings for the uglify plugin here. Apply these using package.json:

"uglifyjs-webpack-plugin": "^2.1.2"
 Config:

14. The next and final step is the configuration for production mode using webpack.config.prod.js:

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
  ...
  optimization: {
    minimizer: [new UglifyJsPlugin()],
 },

Once this is all done, you should be done with the updating process. However, you may get a unique deprecation error, which means you will need to trace these errors using the error message then update any further Webpack plugins as required. This will especially be the case if you are working with custom plugins or loaders.