Webpack CommonsChunkPlugin, HtmlWebpackPlugin Setup
In this example, we will show you the capabilities of webpack's commonsChunkPlugin. It is such an important feature of webpack that I ended up recording a video.
Single Entry Point[wpgist id="1a27e3207c6ecaf87220cc765ffb6257" file="single-entry.js"] Note the followings :
entry- We have a single entry point in Router.jsx
output- Instruct webpack to create
bundle.jsfrom our single entry point
new HtmlWebpackPlugin- Generates the
index.htmlfile and injects the following script tag in it
Mutiple Entry Points[wpgist id="1a27e3207c6ecaf87220cc765ffb6257" file="mutiple-entry-points.js"] Note the followings :
entry- Instructs webpack to generate two bundles namely app, vendor
output- Instructs webpack to generate output bundle with the dynamic names. Here, it will generate the following bundles
new CommonsChunkPlugin- Instructs webpack to extract the common modules from the
app, vendorentry points and generate a bundle with
commons-[hash].jsname which can be referred as
commonsat other places.
new HtmlWebpackPlugin- Generates
index.htmlfile and injects the following script tags in it
If you find this post useful and want us to write more about webapck let us know by leaving your feedback in the comments.