Using webpack and html-webpack-plugin to output many html files

Question

I'm using webpack to output JS, SASS/CSS and HTML and some other operations, including babel.

I also have a series of static HTML files that have several operations run on them as well. While most examples show how to output one, two or three HTML files, using this:

    new HtmlWebpackPlugin({
        filename: 'html/index.html',
        template: 'html/index.html'
    }),
    new HtmlWebpackPlugin({
        filename: 'html/about.html',
        template: 'html/about.html'
    }),
    new HtmlWebpackPlugin({
        filename: 'html/settings.html',
        template: 'html/settings.html'
    }),

What if I can't predict how many pages there will be? What if there's 40+? How can I approach this better?

Still relatively new to webpack, but I've had experience with with gulp and grunt.

tiagolisalves · Answer 1 · 2018-01-18T03:25:45.143

Try to:

Find the files with the extension that you want.
Create new HtmlWebpackPlugin object configuration for each one.

To find the files with the extension, we can use the function findFilesInDir adapted by the user Nicolas:

...

let findFilesInDir = require('./findFilesInDir.js')

let templateFilesConf = findFilesInDir('src/html', '.html')
 .map((templateFileName) =>  
   new HtmlWebpackPlugin({
     filename: templateFileName,
     template: templateFileName
   })
)

let webpackConf = {
  entry: './path/to/my/entry/file.js',
  ...
  plugins : [...]
}  

webpackConf.plugins = webpackConf.plugins.concat(templateFilesConf)

module.exports = webpackConf

Using webpack and html-webpack-plugin to output many html files

1 Answers1