Update packages

1. Install npm-check-updates by running npm install -g npm-check-updates
2. run ncu in terminal
3. check all updated dependencies
4. run ncu -u to update all dependencies in package.json
   run ncu -u -x <name> to exclude packages
5. run npm install

Remove unnecessary v4 packages

In webpack 5 some packages are no longer necessary because are now included. For us its usually this few:

• webpackbar
• terser-webpack-plugin
• optimize-css-assets-webpack-plugin
• friendly-errors-webpack-plugin
• file-loader
• run npm uninstall webpackbar terser-webpack-plugin optimize-css-assets-webpack-plugin friendly-errors-webpack-plugin file-loader

Update your webpack.config.js

1. Add caching
   

   cache: {
     type: 'filesystem',
     cacheDirectory: path.resolve(__dirname, '.temp_cache'),
     compression: 'gzip',
   },

2. remove optimization block
3. remove plugins WebpackBar and FriendlyErrorsWebpackPlugin
4. remove file-loader module
5. remove "imports/require" like TerserPlugin, OptimizeCSSAssetsPlugin, optimize-css-assets-webpack-plugin, webpackbar
6. Check this example for compare

Additional Information

Should an error message appear regarding PostCss. Delete the node_modules folder and the package-lock.json file and run npm install again.