問題タブ [pug-loader]

Angular 2 アプリケーションを作成しており、テンプレートに pug を使用したいと考えています。私はソリューションを構築するためにwebpackを使用しています。

私がちょうど使用する場合

webpack 構成ファイルでは、画像ファイルの URL は書き換えられません。だから私はパグをに変更しようとしました

しかし、それはこのエラーを与えます:

そのため、代わりに次の webpack 構成を試しています。

しかし、それはこのエラーを与えます:

この問題を解決する正しい/最善の方法は何ですか?

Webpack を使用するようにサイトを移行していますが、構成について少し助けが必要です。Pug/Jadeで書かれたページがいくつかありますが、それらは大きくてあまりアクセスされません (利用規約やプライバシー ポリシーを考えてみてください)。私のファイルのほとんど.jadeはAngularテンプレートであるため、それらはコンポーネントにインライン化されており、うまく機能します. ただし、これらのいくつかのファイルは、アプリの残りの部分とは別に提供される静的な HTML ファイルに Webpack をコンパイルしたいと考えています。ただし、ファイル名にハッシュを含めたいと思います。

私が思いついた基本的なアイデアは次のようなものです。

でroutes.ts：

のローダーwebpack.config.jsのリスト:

pug- loader、 pug- html-loader (?exports=falseオプションの有無にかかわらず)、html-loader、extract-loader、extract-text-webpack-plugin、およびfile-loaderのさまざまな組み合わせで試しましたが、すべて結果のファイルに余分なアーティファクトがあり.htmlます。たとえば、 で始まるmodule.exports =か\"、ファイル内のどこにでもあるはずです"。

誰でも助けることができますか？

パグファイルには次の構成があります...

これはうまく機能し、url-loader を使用してロードする画像を追加したいと考えています。私の構造はこのようなものです

そして、pngを含めたいので、追加するパグファイルに...

img(src="thing.png")

これは解決しないので、次のようなことを試しimg(src=require("thing.png"))ました。これらのどれも機能しません。このようにhtml-loaderを追加してみました...

しかし、それから私は...

これはすべて、私のスタイラスで正常に動作します...

私も試しました...

そして得るCannot read property 'png' of undefined

また、そこにあるhtmlでその行をコメントアウトすると...

パグで画像を要求するにはどうすればよいですか?