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.

Code splitting with webpack’s CommonsChunkPlugin, html-webpack-plugin!

Single Entry Point

Note the followings :

  • entry – We have a single entry point in Router.jsx
  • output – Instruct webpack to create bundle.js from our single entry point
  • new HtmlWebpackPlugin – Generates the index.html file and injects the following script tag in it
<script type="text/javascript" src="build.js"></script>

Mutiple Entry Points

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, vendor entry points and generate a bundle with commons-[hash].js name which can be referred as commons at other places.

  • new HtmlWebpackPlugin – Generates index.html file and injects the following script tags in it

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

Further Reading

If you find this post useful and want us to write more about webapck let us know by leaving your feedback in the comments.

You may also like...

Leave a Reply

Your email address will not be published.