私は、htmlファイルをプレーンな HTML ファイルとして抽出する必要がある角度アプリケーションに取り組んでおり、同時に<img src="...">それらの画像を (アセットとして) 必要とするかどうかを確認する必要があります。さらに、イメージはルート パス (したがって) に基づいているため、webpack設定 (ベース パス)/images/something.pngに対して相対的に解決する必要があります。context
どうすればこれを達成できますか? html-loader を file-loader とうまく連携させることができません。前者は (ステートメントを含む) JS ファイルを出力しrequire、後者はプレーンな HTML ファイルを想定しているためです。
問題のローダーのソースコードを掘り下げて、自分で解決策を見つけました。
基本的に、file-loader は「生の」ファイルを想定しているため、デフォルトでは機能しません。そのため、HTML ファイルを出力する場合は、JS ファイルではなく HTML ソースが必要です。ただし、html-loader は HTML ファイルを受け取り、JS ファイル (requireアセットとコンテンツを含む) を出力します。
解決策は、html-loader から出てくる JS を解析し、それをプレーンな html に変換する、この深く隠された素晴らしい抽出ローダーでした。アセットは引き続き必要であり、キャッシュバスティングのハッシュに置き換えられます。
これで完璧です。出力を file-loader に渡すと、最終的に html ファイルが作成されます。
構成例
私の場合、ローダー構成は次のようになります。
'file-loader!extract-loader!html-loader' + '?root=' + encodeURIComponent(sourcePath.toString())