Common chunks

In order to understand common chunks, lets create a 'sharedModule.js' in our ./src/scripts folder.

1. Create ./src/scripts/sharedModule.js

(click on image to see in expanded popover view)

2. Add the below code to above created sharedModule.js

console.log('Hello! This is shared-module reporting!');

3. Import the sharedModule.js in our app.js as well in settings.js:

(click on image to see in expanded popover view)

4. Run npm start ( If you were in ‘watch’ mode, webpack will run by itself once changes are saved)

$ npm start

5. Once webpack finishes bundling the code, the two bundle files — ./dist/app.bunlde.js and ./dist/settings.bundle.js — should have the sharedModule code. Verify this by refreshing the index.html and settings.html in their respective browser windows.

(click on image to see in expanded popover view)

However, this is not the optimum way, if you check the two bundle files - ./dist/app.bunlde.js and ./dist/settings.bundle.js , you would notice the code coming from shareModule.js is repeated in both the bundle files.
If user has visited our index.html (app.bundle.js), the browser would downloaded sharedModule.js with it and it need not get the same file again when navigating to settings.bundle.js.

(click on image to see in expanded popover view)

6. To handle the sharing of the common code optimally, webpack provides an built-in plugin –‘CommonsChunkPlugin’.

Import the plugin in webpack.config.js and create an instance of it in the plugins array, as shown below:

In line#2, we first imported CommonsChunkPlugin in our wepack.config.js

Line#5–9, we added CommonsChunkPlugin to plugins array with below config options:

name: ‘shared’ — this is the name for the common chunk file that will be created by the plugin, this name will be used in the file-name template specified for output file’s name in output.filename property i.e.[name].bundle.js, thus the name of the shared chunk would be shared.bundle.js

minChunks: 2 - this means create a chunk if the module is found to be shared in at-least two other files/modules. In our case, sharedModule.js is shared in 2 files – app.js and settings.js, hence sharedModule.js will be bundled in a separate bundle file instead of bundling its code in app.bundle.js and settings.bundle.js.

Also note the chunks property in config object of each of the HtmlWebpackPlugin instance.
We added shared chunk to both index.html andsettings.html, which will result in a <script> tag for shared.bundle.js, in addition to those for vendor.bundle.js and app.bundle.js

7. Run npm start for webpack to run with the updated config options.

$ npm start

8. If we look into your ./dist folder now, we should see the expected 'shared.bundle.js' file containing the code of our sharedModule.js. Also notice the common webpack-injected code being moved to shared.bundle.js from app.bundle.js and settings.bundle.js, making the two files look a lot cleaner.

(click on image to see in expanded popover view)

9. The generated html files index.html and settings.html would now have an additional <script> tag for shared.bundle.js.

(click on image to see in expanded popover view)

9. Open index.html and settings.html in the browser (or refresh if already opened) and we should see all our javascript code working as expected.

(click on image to see in expanded popover view)

In the next lesson, we would learn how to use ‘webpack-dev-server’ to setup a web-server locally in our development machine and use it to serve our application.

[<< Prev: Multi-page applications] [ Next: webpack-dev-server >>]