2016-05-02 4 views
3

私はhtmlファイルをプレーンなHTMLファイルとして抽出する必要がある角度アプリケーションで作業していますが、同時にそれらの画像をアセットとして要求するためには<img src="...">を確認する必要があります。さらに、イメージはルートパス(/images/something.png)に基づいており、webpack contextの設定(ベースパス)に対して相対的に解決する必要があります。ファイルローダーとhtmlローダーを一緒に使用する

どうすればこの問題を解決できますか?ファイルローダーでうまくいくようにhtml-loaderを取得できません。前者はJSファイル(require文)を出力し、後者はプレーンなHTMLファイルを出力するためです。

答えて

6

私は、問題のローダーのソースコードに多くを掘り下げて解決策を見つけました。

ファイルローダーは「生の」ファイルを必要とするため、基本的には動作しません。そのため、HTMLファイルを出力するには、JSソースではなくHTMLソースが必要です。しかし、html-loaderはHTMLファイルを受け取り、JSファイル(requireアセットと内容)を出力します。

ソリューションは、この深く隠された、素晴らしいextract-loaderたJSは、HTMLローダーから出てきて解析した、バックプレーンHTMLに変換し、資産はまださえをキャッシュ消去のためのハッシュとを交換しを必要としています。

これは完璧です。出力をファイルローダーに渡すと、最終的にhtmlファイルが作成されます。私の場合は

構成例

、私のローダー設定は次のようになります。

'file-loader!extract-loader!html-loader' + '?root=' + encodeURIComponent(sourcePath.toString()) 
+2

あなたは解決策を説明したが、解決策を投稿しませんでした。設定例? –

+0

'file-loader!extract-loader!html-loader'は私にとっては十分でした。 –

+0

はい、私はsrc = "/ url"が読み込まれるまで無視される理由を調べるために私の髪を引っ張っていました(html-loaderの場合は、そのルートURLはデフォルトでは無視されます。あなたは?root =を使用して、私は相対URLに切り替えました。どちらも動作します。ありがとう。 –

関連する問題