4

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

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

{
    test: /\.pug$/,
    loader: 'pug-html-loader' 
},

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

img(src=require('../../public/images/logo.png'))

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

Module build failed: TypeError: require is not a function

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

{
    test: /\.pug$/,
    loader: 'html?attrs=img:src!pug-html-loader' 
},

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

ERROR in ./src/app/app.component.pug
Module not found: Error: Cannot resolve 'file' or 'directory' ./\"../../public/images/logo.png\" in /<app-path>/src/app
 @ ./src/app/app.component.pug 1:213-263

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

4

2 に答える 2

0

pug-html-loaderパッケージでこのバグに遭遇していたことが判明しました。このパッケージの別のバージョンを使用することで、機能するようになりました。

于 2016-08-16T18:52:23.020 に答える
0

require()@andreypopp が言うように、パグには必要ありません。ただし、js モジュールではなく生の生成された html をエクスポートするように、 pug-loaderexportsオプションをに設定する必要もあります。falseこれが私の設定です：

  {
    test: /\.pug$/,
    loaders: [
      // html loader gets webpack to process <img> src
      'html-loader',
      // requires pretty option otherwise some spacing between elements is lost
      'pug-html-loader?{"pretty":true,"exports":false}'
    ],
    include: [sourcePath]
  },
于 2017-01-03T11:15:39.503 に答える