DEV Community 👩‍💻👨‍💻

Mario Rodeghiero
Mario Rodeghiero

Posted on

Multiple HTML files with HtmlWebpackPlugin

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"
Enter fullscreen mode Exit fullscreen mode

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
  ]
}

Enter fullscreen mode Exit fullscreen mode

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)
};

Enter fullscreen mode Exit fullscreen mode

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!!

Top comments (4)

Collapse
 
goldsteinr profile image
Ricardo Goldstein • Edited on

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.

Collapse
 
mariorodeghiero profile image
Mario Rodeghiero

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...

Collapse
 
kensleyolewis profile image
klewis

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

Collapse
 
hamid814 profile image
hamidbakhtiari

good article thank you

DEV

Thank you.

 
Thanks for visiting DEV, we’ve worked really hard to cultivate this great community and would love to have you join us. If you’d like to create an account, you can sign up here.