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!!
Top comments (4)
Hi,
In the line
articles.map(function
, what isarticles
?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
good article thank you