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

正如@andreypopp 所说，你不需要require()在哈巴狗中。但是，您确实需要将 pug-loaderexports选项设置为，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]
  },
于 2017-01-03T11:15:39.503 回答