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

Question

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

我还有一系列静态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来说还是个新手，但我有过吞咽和哼唱的经验。

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