使用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