使用webpack html-loader全局許多html文件？

Question

我試圖散列和優化我的圖像在由靜態網站生成器雨果生成的HTML文件。

我能得到html-loader處理文件一次一個，使用的測試配置：

entry: { 
     main: './entry.js' 
    }, 
    module: { 
     rules: [ 
      { test: /\.jpg$/, use: [ "file-loader" ] }, 
      { test: /\.png$/, use: [ "file-loader" ] }, 
      { test: /\.html$/, use: ExtractTextPlugin.extract("html-loader") } 
     ] 
    }, 
    output: { 
     publicPath: "./", 
     filename: 'test.bundle.js' 
    } 

和entry.js很簡單：含

require('./test.html'); 

：

<img src="test.png" data-src="test.png" > 

這很好用！我得到一個帶有散列圖像源的HTML文件，圖像本身被散列。

我真正想要做的是能夠遍歷HTML文件的目錄並獲得類似的結果。

我已經試過的東西沿着線：

const glob = require('glob'); 

glob.sync("./*.html").forEach(function(file) { 
    require(path.resolve(file)); 
}); 

無濟於事。

我一直在挖掘和挖掘，我似乎無法找到答案。任何想法讚賞！

Answer 1

原來，您可以將對象傳遞給Webpack作爲入口點。因此，你所要做的就是將你想要的文件全部整理起來，然後將它轉換爲一個對象並將該對象用作你的條目。