Common chunks
In order to understand common chunks, lets create a 'sharedModule.js'
in our ./src/scripts folder.
- Create
./src/scripts/sharedModule.js
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:
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.
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.
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 beshared.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 forshared.bundle.js
, in addition to those forvendor.bundle.js
andapp.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.
9. The generated html files index.html and settings.html would now have an additional <script> tag for shared.bundle.js
.
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.
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.