webpack html-loaderを使って多くのhtmlファイルをGlobに変換しますか？

Question

静的サイト生成ツールHugoによって生成された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に渡すことができます。だからあなたがしなければならないのは、あなたが望むファイルをグロブにして、それをオブジェクトに変換し、そのオブジェクトをあなたのエントリーとして使うことだけです。