Migration to webpack-2

Spread the love

webpack-migrationRecently i have done webpack migration for our React redux project to Webpack 2. There are lot of syntax changes was there (Which i will explain below) that needs to be made. Also webpack also provides features like Tree shaking, Caching, dynamic imports etc which leads to change in compilation time and bundle sizes. Let me give little overview of what all major syntax changes for migration and than we will discuss various feature to improve webpack bundling process.

1. Module.loaders changed to module.rules:

In webpack 1, modules.loaders got changed to module.rules, loaders names array is changed to use.











2. loader keyword is mandatory need to be appended for loaders:

In webpack 1, loaders are optionally need to be appended but in webpack 2,  that is mandatory now.














3. json-loader is not required anymore:

In webpack 2, if no loader is mentioned for JSON file, it will automatically use json-loader to load it up.

4. resolve.root is replaced by resolve.module:

As shown in below screenshot, resolve.root got replaced by resolve.module.









5. Uglify plugin sourceMap option is false by default:














6. DedupePlugin is removed:

webpack.optimize.DedupePlugin is not required anymore.



7. OccurenceOrderPlugin is available by default now:

webpack team has made sure to rename above plugin and made it by default.



8. ExtractTextPlugin.extract is added:

ExtractTextPlugin.extract option got changed in webpack 2.

Above are all syntax changes that i had to do for webpack 1 to webpack 2 migration. For any other remaining changes, you can consult webpack migration guide,

New Features introduced in webpack 2:

There are lot of cool features added to webpack 2 like Tree shaking, dynamic module loading and caching by splitting webpack menifest. I will discuss all these in some detail in order to understand it.

Tree Shaking:

Tree shaking is a feature which removes non-required modules from final bundles which are not used by your codebase. According to webpack migration guide, it’s a way of dead code elimination from final bundles. In order to explain this, let’s consider below example :

let’s consider you are importing CommonUtilityModule.js in your  codebase, which contains multiple functions as follow:

Now in your app.js code, you are using only one function i.e deepCopy as follow:

Normally, as we imported “CommonUtilityModule” into first line, so webpack will include all the CommonUtilityModule.js code into final bundle. So now all the rest of code in CommonUtilityModule in what called as dead code or non useable code. In webpack 2, it tries to eliminate code which is not used in the application.

Caching by separating webpack manifest File:

webpack migration documentation mention a method which allows you to cache various webpack bundles across various build. This involve extracting webpack boilerplate which changes across build rather than changing all bundles. Let’s consider that you have following webpack config:

So above configuration will create 3 bunddle [app.js,vendor.js & helper.js]. Now let’s suppose you made changes in your app code only without making changes in any of helper entry or vendoe entry. But webpack will still chanhe hashes for all of three bundles.

So how we can allow app.js bundles only while making changes corrosponding to that???

So now webpack 2 provide the method where you can remove webpack menifest file seperately keeping all other bundles hashes unchange across various builds. First of all change output hash with chunkhash. You can google the difference between hash and chunkhash.

As seen above, i have used chunkhash for my production build. Actually chunkhash is build fromcontent of file. Secondly, you have to add menifest entry in CommonsChunkPlugin as follow.

Above configuration will make a common webpack chunk named as menifest.js, which contains js webpack Boilerplate code.

But still there is one more play to be make. During webpack compilation time, each module id is incremental based on resolving order which leads to change in code for each bundle. So webpack provide HashedModuleIdsPlugin which resolve modules based on relative name rather than id incrementation.

After doing all this, now your bundles hashes will be changed based on the part you have changed in codebase. This will help browser to cache your files respectively.


Leave a Reply

Your email address will not be published. Required fields are marked *