using html-webpack-plugin to generate index.html

Now that we got webpack configured to package and bundle our js code in a single file -app.bundle.js, we need an index.html for our web app with a script tag havingsrc='app.bundle.js'.

We have two options - either create it manually or have it created automatically by using ‘html-webpack-plugin’

Option 1: Create index.html manually

Lets first create the index.html file manually. Inside the ‘dist‘ folder, where webpack outputs the app.bundle.js file, add a file ‘index.html’ with the required script tag, as shown below:

Add below code to the above created index.html

If you open the index.html in the browser, you should see our javascript code working:

(click on image to see in expanded popover view)

Option 2: Using webpack-html-plugin to create index.html

While creating index.html manually works good, it would be nice if webpack can create the index.html automatically for us with an included <script> tag with its src pointing to our app.bundle.js.

Webpack can do this for us with the help of html-webpack-plugin. Using this plugin has some added advantages like auto-hashing the ‘src’ attribute of the embedded <script> tag every time the webpack is run, which makes browser to get the latest version of the file from server instead of using a cached one whenever it has a new hash.

Lets see how to setup the plugin –
1. First, remove the manually created index.html that we created in the above section.

2. Install html-webpack-plugin:

$ npm install html-webpack-plugin

3. Configure the webpack.config.js to use the plugin :

In the webpack.config.js, ‘require’ the plugin and to setup the options for the plugin, we need to add a plugins property in the configuration as shown below:

Here we added a new HtmlWebpackPlugin object in the plugins array of webpack.config object. Notice the hash option has been set to true which will add a unique hash to the src of the embedded <script> tag.

4. Now run npm start command for webpack to rebuild the package.

npm start 

5. This time we would see 'html-webpack-plugin' automatically created an index.html for us, with an included <script> tag with its src pointing to the generated app.bundle.js.

(click on image to see in expanded popover view)

Using custom template for generating index.html

Great, so now we got webpack create index.html for us using the HtmlWebpackPlugin.

However, if you noticed in the screenshot above, the index.html generated by HtmlWebpackPlugin, is very basic, just embedding the <script> tag. Its lacking any other HTML content, including our custom title, the page header and the welcome message that we have added when we created the file manually in the above section. If we look at the index.html file, HtmlWebpackPlugin created in the browser, presently, except our js code working, it will look blank:

(click on image to see in expanded popover view)

If we want custom HTML content in the HtmlWebpackPlugin generated index.html, we can create a template html file and tell the plugin to use it as a template in its options as below:

1. Create a template HTML file — inside our src folder, create a file index.html:

(click on image to see in expanded popover view)

2. Add below code to src/index.html:

Notice the placeholder elements <%= htmlWebpackPlugin.options.title %> and <%= htmlWebpackPlugin.options.myPageHeader %> we have in the above html file which we would set as template to HtmlWebpackPlugin for generating index.html. We will provide the values for these placeholder options in the plugin’s configuration options webpack.config.js.

3. Now, in the webpack.config.js file, update the configuration of HtmlWebpackPlugin to use ‘template‘ property as below:

Notice the new options we added to the configuration object of HtmlWebpackPlugin

• template: './src/index.html' – this option specifies which file to use as template for the index.html being created.
• title: 'My Awesome application' – this is a custom property we added to the config object, the value of this property would be used to embed in the placeholder element <%= htmlWebpackPlugin.options.title %> we have in our template html file.
• myPageHeader: 'Hello World' – this is another custom property we added to the config object, the value of this property would be used to embed in the placeholder element <%= htmlWebpackPlugin.options.myPageHeader %> we have in our template html file.

3. Run npm start command for webpack to rebuild the package.

npm start

4. This time html-webpack-plugin would use the index.html we created under src folder as template and thus the generated index.html in the ‘dist’ folder would contain our custom HTML in addition to the embedded <script> tag.

(click on image to see in expanded popover view)

5. And below is how the index.html would now look in the browser:

In the next section, we would learn about webpack’s watch mode, that makes webpack keep ‘watch’-ing for any changes we make in our code and rerun by itself to rebuild the package when any changes are made to the code.

[ <Prev: Webpack config file] [ Next: ‘watch’ mode >> ]