webpack - Webpack の動的インポート テキスト ファイル

Question

通常、生の文字列をインポートする必要がある場合は、 を使用しますraw-loader。一般的な使用例は次のとおりです。

1. ソースコードに次を追加します。

let data = (await import(/* webpackChunkName: "a.txt" */"./a.txt")).default;
console.log(a.default) 

2. a.txt.js以下を含むファイルを生成します。

(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{37:function(e,n){e.exports='CONTENT_OF_TXT_FILE'}}]);

3. <script charset="utf-8" src="/a.txt.js"></script>インポートするソース コードは、HTML HEAD セクションに追加するものを生成します。

4. ブラウザが両方のスクリプトを評価した後、webpack マジックにより、es6 インポートのように見えます。

これは、es6 のインポートが通常どのように見えるかです。raw-loader は、動的インポートを使用したハックのように見えます。しかし、モジュールa.txtにするのではなく、宛先ディレクトリにコピーするだけですか? es6XmlHttlRequest を使用して厄介なラッパーを作成することなく、エレガントなソリューションが必要です。Webpackにそのようなプラグインはありますか?

他にも同様のツールがいくつかあります。

• file-loader- ファイルを dist ディレクトリにコピーし、ファイル名を返します。これにはまだいくつかのラッパーが必要であり、es6-module ほどエレガントには見えません。
• html-loader- HTML を解析してsrc属性を検索することにより、HTML のみをサポートします。