Webpack CommonsChunkPlugin, HtmlWebpackPlugin Setup

In this exam­ple, we will show you the capa­bil­i­ties of webpack’s com­mon­sChunkPlu­gin. It is such an impor­tant fea­ture of web­pack that I ended up record­ing a video.

Code split­ting with webpack’s Com­mon­sChunkPlu­gin, html-webpack-plugin!

Sin­gle Entry Point

Note the followings :

  • entry — We have a sin­gle entry point in Router.jsx
  • output — Instruct web­pack to cre­ate bundle.js from our sin­gle entry point
  • new HtmlWebpackPlugin — Gen­er­ates the index.html file and injects the fol­low­ing script tag in it
<script type="text/javascript" src="build.js"></script>

Muti­ple Entry Points

Note the followings :

  • entry — Instructs web­pack to gen­er­ate two bun­dles namely app, vendor
  • output — Instructs web­pack to gen­er­ate out­put bun­dle with the dynamic names. Here, it will gen­er­ate the fol­low­ing bundles
app-[chunkhask].js
vendor-[chunkhash].js
  • new CommonsChunkPlugin — Instructs web­pack to extract the com­mon mod­ules from the app, vendor entry points and gen­er­ate a bun­dle with commons-[hash].js name which can be referred as commons at other places.

  • new HtmlWebpackPlugin — Gen­er­ates index.html file and injects the fol­low­ing script tags in it

<script type="text/javascript" src="app-[chunkhash].js"></script>
<script type="text/javascript" src="commons-[chunkhash].js"></script>

Fur­ther Reading


If you find this post use­ful and want us to write more about webapck let us know by leav­ing your feed­back in the comments.


You may also like...