Webpack 4 to webpack 5 migration

Photo by James Harrison on Unsplash

I am a software engineer and couple of moths ago I was given a task to upgrade the weback from 4 to webpack 5 now this is a major breaking change for your application and I faced lots of problems and decided to share with you my journey of how I resolved them, so with out further ado lets start.

Install webpack-cli latest

The file path has changed from, Before:

Before: 
options: {
   name: 'fonts/[name]-[hash].[ext]'
}
Now: 
generator: {
   filename: 'fonts/[name]-[contenthash][ext]'
}

Change all the hash to contenthash according to webpack doc it is more efficient.

If you were using the below remove the “.” from it other wise your assets will be abc..png

BEFORE:
fonts/[name]-[contenthash].[ext]   
NOW: 
'fonts/[name]-[contenthash][ext]'

your output path will change to below:

output: {
path: __dirname + '/../../assets',
assetModuleFilename: 'images/[name]-[contenthash][ext]',
}

If you start getting lots of build error like

“ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/extract-text-webpack-plugin/dist/loader.js?”

Got the website of node-sass below and install node-sass version that is compatible with the node version that you are using here is the link

This is how i resolved the below error

ReferenceError: process is not defined

1. npm i — save-dev process
2. delete the node modules folder
3. in your webpack config file plugin section add below

plugins: [
new webpack.ProvidePlugin({
    process: 'process/browser',
}),

Also in the webpack add the alias like below:

resolve: {
    alias: {
        process: "process/browser"
    },

Now do npm i and when you build your application the error will disappear.

Below is how you can configure the Terser for Webpack 5 as now they have removed the separate module and made it as part of Webpack to the setting will change as below;

Before:
minimizer: [
        new TerserPlugin({
            terserOptions: {
                mangle: {
                  compress: {},
                },
            }
        })
    ]

After:
minimizer: [
        (compiler) => {
            const TerserPlugin = require('terser-webpack-plugin');
            new TerserPlugin({
              terserOptions: {
                    compress: {},
                }
            }).apply(compiler);
        },
    ]

You can read more about it here https://webpack.js.org/configuration/optimization/ and to check the terser option check this url https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions

Your babel configuration will change like below:

Before:
rules:[{
     use: {                    
        loader: 'babel-loader'                
      }}]
After:
   rules: [{
    use: {
        loader: 'babel-loader',
        options: {
           presets: ['@babel/preset-env']
                }
        }
}]

If it helped you please give it a clap it will encourage me to write more.

Also the if you are using the splitChunks to combine your common css and js file that has been modified and become part of webpack to use it modify your webpack config like below.

Before:
optimization: {        
   splitChunks: {            
      chunks: 'all',            
      name: 'common',            
      minChunks: 2      
   },
}

After:
optimization: {
   splitChunks: {
      chunks: 'all',
      minChunks:2,
      cacheGroups: {
         commons: {
            name: 'common'
         },
       },
    },
}