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

尝试：

查找具有所需扩展名的文件。
为每个人创建新的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

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

1 个答案: