問題タブ [webpack-html-loader]

ng-src 属性を正しいパスに置き換えるように html-loader を構成するにはどうすればよいですか? 次のようなレガシーアプリケーションがあります-

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

どうすればこれを達成できますか? html-loader を file-loader とうまく連携させることができません。前者は (ステートメントを含む) JS ファイルを出力しrequire、後者はプレーンな HTML ファイルを想定しているためです。

Webpack を使用して Angular2 アプリを作成し、テンプレートに html ローダーも使用しています。

テンプレートの 1 つに次の行があります。

<img attr.src="apps/{{ appName }}/icon.png" />

当然のことながら、html-loader はコンパイル時にこのアイコンをロードしようとして失敗します。おわかりのように、私の意図はアイコンへのパスを動的にすることです (これは の一部ですngFor)。そのため、コンパイル時に webpack に無視させます。

この特定の img ソースを無視するように html-loader に指示するにはどうすればよいですか?

編集:htmlローダーで属性解析を完全に無効にできることがわかりました(つまり、画像ソースがないか、実際にhtmlに含まれているものはコンパイル時に読み込まれません)が、特定の画像のみを選択的に除外できるようにしたいと思いますパス。

次のような index.html の変数を置き換えようとしています。

<meta name='author' content=$variable>

私が使用する設定ファイルでは：

loaders配列で、次にplugins:

ただし、この設定により、次の結果が得られます。

ERROR in ./~/html-webpack-plugin/lib/loader.js!./src/index.html Module parse failed (...) Unexpected token (1:0) You may need an appropriate loader to handle this file type.

これが原因である可能性があるか、またはこれをどのようにデバッグできますか?

私たちのプロジェクトの 1 つの大規模な自家製ビルド スクリプトを webpack に移行することを検討しています。

その機能の 1 つは、ディレクトリをトラバースし/views、html ファイルの内容をメインindex.htmlファイルにコピーすることです。これにより、すべてを 1 つのファイルにまとめなくても、KnockoutJS のテンプレート機能を簡単に使用できます。このようなもの：

理想的には、スクリプトタグにテキストを挿入し、ファイルパスに設定することで、各ファイルを としてrequire('./views')埋め込むことができるようにしたいと考えています。約 100 種類のテンプレートがあるため、個別に ing することは避けたいと思います。.html<script type="text/html" id="views/foo">...</script>idrequire()

これを構成html-loaderまたは実行できますhtml-webpack-pluginか? 独自の webpack プラグインを作成する必要があるかどうか、または既存のプラグインを構成して必要なことを実行できる方法があるかどうか疑問に思っています。

ありがとう！

だから私はwebpackを使って非常に簡単な仕事をしたいと思っています。

たとえば、いくつかの静的HTMLテンプレートがあります

test.html

私がやりたいのは、テンプレート内の文字列を返すことだけです。

with は次のような文字列を返す必要があります。

代わりに、次の文字列を返します

raw-loader や html-loader など、いくつかのモジュールを試しました。どちらも同じように動作するので、ソースコードを調べて、このように動作することが想定されていることを確認しました。

では、生の HTML だけが必要な場合、これをどうする必要があるのでしょうか。先頭に追加された「module.exports =」文字列を削除するのは悪い習慣ですか? バンドル編集から:「modules.export =」部分を削除すると、バンドルは何も返されません:/

私の設定

html-loaderのドキュメントには、この例があります

「リスト」はどこから来たのですか？補間スコープにパラメータを提供するにはどうすればよいですか?

template-string-loader のようなことをしたいと思います:

そしてfile.htmlで

しかし、うまくいきません。template-string-loader と html-loader を混ぜようとしましたが、うまくいきません。template-string-loader しか使用できませんでしたが、HTML の画像は webpack によって変換されません。

何か案は？ありがとうございました

私は Jest テスト フレームワークを使い始めたばかりで、単体テストは問題なく動作しますが、そのモジュール (babel+webpack 経由の ES モジュール) で HTML ファイルを必要とするコンポーネントをテストする際に大きな問題が発生しています。

以下に例を示します。

package.json空のオブジェクトを返すように Jest の構成で設定したコンポーネント固有の SCSS ファイルをロードしていますが、Jest が次のimport template from './errorHandler.tmpl';行を実行しようとすると、次のように壊れます。

私の Jest 設定package.jsonは次のとおりです。

webpackhtml-loaderが Jest で正しく動作していないようですが、これを修正する方法が見つかりません。

html-loader importこれらをテストで機能させる方法を知っている人はいますか? それらは私のlodashテンプレートマークアップをロードしますが、.jsファイルにこれらの大量のHTMLチャンクを時々入れたくないので、その部分を省略できますimport template from x。

PS: これは反応プロジェクトではなく、単純な webpack、babel、es6 です。