我如何让 webpack 重写哈巴狗的图像源？

Question

我正在编写一个 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

解决此问题的 correct/best 方法是什么？

Answer 1

原来我打的是 this bug in the pug-html-loader 包裹。通过使用这个包的不同版本，我让它工作了。

Answer 2

正如@andreypopp 所说，哈巴狗中不需要 require()。而且，您确实需要将 pug-loader exports 选项设置为 false 以便它导出原始生成的 html 而不是 js 模块。这是我的配置：

  {
    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]
  },

我如何让 webpack 重写哈巴狗的图像源？

How do I get webpack to rewrite image sources from pug?

webpack

pug-loader