使用webpack和html-webpack-plugin输出许多html文件

Question

我正在使用webpack输出JS，SASS / CSS和HTML以及其他一些操作，包括babel。

我也有一系列静态HTML文件，这些文件上也运行了一些操作。 尽管大多数示例都显示了如何使用此输出一个，两个或三个HTML文件：

    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'
    }),

如果我无法预测会有多少页怎么办？ 如果有40岁以上怎么办？ 我怎样才能更好地做到这一点？

对于webpack来说还是相对较新的东西，但是我对gulp和grunt有一定的经验。

Answer 1

尝试：

1. 查找具有所需扩展名的文件。

2. 为每个创建新的HtmlWebpackPlugin对象配置。

要查找具有扩展名的文件，我们可以使用用户Nicolas改编的函数findFilesInDir ：

...

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