Working with HTML Layouts in Webpack

Webpack can work with HTML layouts. It allows you to automatically connect collected bundles to the layout file. This is especially convenient when the bundle name contains a hash.

To work with HTML layouts, html-webpack-plugin is used. Let's install it:

terminalnpm install html-webpack-plugin --save-dev

Let's import it:

webpack.config.jsimport HtmlWebpackPlugin from 'html-webpack-plugin';

Let's turn it on:

webpack.config.jsexport default {
  entry: './src/index.js',
  plugins: [
    new HtmlWebpackPlugin(),
  ],
};