Migrating to WebPack 4 for Beginners
Why and how to migrate to web-pack 4
Why migrate?
Web-pack is our static module bundler for modern JavaScript applications and has become a core part of how we bundle them.
🐌 Slow Build: The Main Reason.
We have a fairly complex app with lot of entry points, also each entry point can have multiple output files considering for i18n translations. Also, we have neglected our build process for some time now. Result? Our build was slow!
🏎How to Speed Up the Build?
- Legato (Web-Pack 4) is claimed to be 98% faster. Migrating to Web-Pack 4 can itself can help you loose those extra seconds. 😅
- Migrating exercise will also help you deeply understand the build process of your existing code base. It will give you ability to refactor and further optimise your web-pack build. At the very least, it will help you make a todo list of things you can improve on in your build.
After migrating to Web-Pack 4 and some easy refactoring, the build time is reduced by 60%.
From 159 seconds to 60 seconds! 🏎🏎🏎
How to Start Migrating to Web-pack 4?
- Read the change-log, as to know what has changed and what’s new. When migrating to a new major release, this should be the first thing to look for in any open source project.🕵️🕵️
- Know your existing web-pack build process inside-out, find out what entry, output, loaders, plugins are and how it is currently being used.
Before migrating, try to refactor/optimise your build code.
- Instead of one big webpack.config.js, it is better to separate all the functions used to say build-utils. All the constants in build constants.
- Separate the dev config from the prod config.
- If you have multiple apps (multiple entry points) in your codebase, in development one would ideally work only on one app at a time. So, make sure your dev build is only building that one app instead of all.
You can write a simple function which return only one filtered entry point in development. Less stuff to build, faster your build! 🏎🏎🏎 - If you are doing i18n by generating a output file for each locale you have to translate. While developing, make sure you are not generating more than one output file. Less stuff to build, faster your build! 🏎🏎🏎
After you are satisfied with refactor and optimisations
- Add latest web-pack to your project. Currently it is 4.16.0.
yarn add webpack@latest --dev- Add web-pack CLI.
yarn add webpack-cli --dev- Provide Mode to web-pack.
Possible values for mode are: none, development or production(default). Providing the mode configuration option tells web-pack to use its built-in optimisations accordingly.
You will have to pass mode in npm script or add it in webpack.config.js
webpack --mode=productionOR
//webpack.config.js module.exports = {
mode: 'production',
...
};
Most probably you would have used CommonChunks plugin. ✋✋
- CommonChunks will have to be replaced to use the new optimization.splitChunks.
Now, the most important step!
- Set process.traceDeprecation to true this will help you to find which packages are using deprecated API
node --trace-deprecation ./node_modules/.bin/webpackThis can also be set from DefinePlugin
new webpack.DefinePlugin({
'process.traceDeprecation': true,
})Most likely, the Node packages still using the old API will throw the below error.
DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` insteadYou can simply upgrade the package one by one
yarn add <package>@latest --dev99% of the times upgrading will solve your error. It did for me! 😅
In that 1%, where just upgrading package to the latest version does not solve the problem, you would have to fix the issue yourself or raise an issue in the open-source project and wait till some-one else fixes it. 😥
If you liked reading this, don’t forget to clap. 👏👏
You can also follow me on on twitter @karanjariwala47 for java-script or react updates.
Thank-you!
