Upgrade Webpack 4 to Webpack 5.
Hey Folks, I hope you all are dong well. Considering this crazy covid times.
Well in this crazy time i thought to do something less crazy and upgrade the Webpack 4 to Webpack 5 in my current project lets face nobody like tech debts and Webpack 5 does offer pretty good improvement overall, read here.
So Let’s begin
As a first step we have to upgrade webpack and related plugins, loaders , which makes my package.json looks like as shared below
It is not necessary for you to include all these node modules in your project. Just upgrade what is already present in your project.
During the upgrade i ran into into lot of issues , and followed the steps shared below to remove them
- Update the scripts in package.json
Change the webpack-dev-server to webpack
Error : Cannot find module ‘webpack-cli/bin/config-yargs’
2. Change setup key to before in webpack config file.
Warning : The `setup` option is deprecated and will be removed in v4. Please update your config to use `before`
3. Update webpack-merge import
Error : “merge is not a function” in webpack config
4. Update copy-webpack-plugin code
Error: Copy Plugin has been initialized using an options object that does not match the API schema.
5. Update PostCSS loader code
Error: PostCSS Loader has been initialized using an options object that does not match the API schema.
Other Issues
- TypeError: Cannot add property htmlWebpackPluginAlterChunks, object is not extensible. Upgrade htmlwebpackplugin
- PostCSS plugin autoprefixer requires PostCSS 8. Update PostCSS or downgrade this plugin
Suggestions
- Change hash to contenthash as it is proven to be more efficient you can read about it here
- Use Asset Modules instead of raw-loader, file-loader, url-loader.
Hurray! You have made this far.
If you still ran into any issue leave it in the comment section below.