loading...

Multiple HTML files with HtmlWebpackPlugin

mariorodeghiero profile image Mario Rodeghiero ・2 min read

Generating multiple HTML files with HtmlWebpackPlugin

In the last days, I made some modifications in my blog and one of them was to stop using Gulp and to use the Webpack. During the configurations, I faced some difficulties and one of them was the process of generating multiple HTML files using the plugin HtmlWebpackPlugin.

Versions

"html-webpack-plugin": "^2.30.1",
"webpack": "^3.11.0"

We assume that you already have the webpack configured and want to implement the HtmlWebpackPlugin plugin to generate multiple HTML files. So, we need to install the plugin, using the command below:

$ npm i --save-dev html-webpack-plugin
or
$ yarn add --dev html-webpack-plugin

Default HtmlWebpackPlugin Configuration

Once you have the requirements configured, usually use the plugin like this

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin')

let HWPConfig = new HtmlWebpackPlugin({
  template: __dirname + "/index.html",
  file: "index.html",
  inject: "body"
});

module.exports = {
  .
  .
  .
  plugins: [
    HWPConfig
  ]
}

I like to store the plugin settings in any variable and then use it inside plugins

Custom HtmlWebpackPlugin Configuration

If we used the default setting for each new file and depending on the number of files, would leave our webpack configuration file, very extensive. So let's create the following configuration :

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin')

let HWPConfig = new HtmlWebpackPlugin({
  template: __dirname + "/index.html",
  file: "index.html",
  inject: "body"

let articlesHtmlPlugin = ['sass-react', 'chart-js', 'copy-right', 'object-literal', 'spread-operator'];

let multiplesFiles = articles.map(function(entryName) {
  return new HtmlWebpackPlugin({
    filename: entryName + '.html',
    template: __dirname + `/articles/{entryName}.html`
})

module.exports = {
  .
  .
  .
  plugins: [
    HWPConfig
  ].concat(articlesHtmlPlugin)
};

1 - We create an array, with the exact name of each article in the articles folder, but without the extension.

2 - We create a "multiplesFiles" variable, where we store in it the "articles.map" return. It will go through each item of the array, add the name + extension in filename and then inform the directory with the name of the file in the template.

3 - Concatenate our variable articlesHtmlPlugin at the end of plugins, using "concat (articlesHtmlPlugin)"

Conclusion

This is one of the alternatives for generating multiple HTML files using the HtmlWebpackPlugin plugin.
Now with each new file created just insert the exact name in the array, that the map would take care of the rest.

Thanks!!

Posted on by:

mariorodeghiero profile

Mario Rodeghiero

@mariorodeghiero

Self-taught Front-End Developer. #ReactJS #styeled-components #Javascript #electronjs

Discussion

markdown guide
 

Hi,

In the line articles.map(function , what is articles?

Edit:

I understood now. But the examples are very wrong, missing closing tags and wrong named variables.

 

Hello Ricardo, sorry for the delay in the response, I will analyze again and try to correct the errors pointed out. I have examples working in the archives of my blog, you can check in:

github.com/mariorodeghiero/marioro...

 

Thanks Mario for the cool tip. Would there be any chance of extending this blog a bit more and showing us a small demonstration of how you would use multiplesFiles in code?

Thanks again