如何让 webpack 从 pug 重写图像源? [英] How do I get webpack to rewrite image sources from pug?

问题描述

我正在编写一个 Angular 2 应用程序，并希望将 pug 用于我的模板.我正在使用 webpack 来构建解决方案.

I am writing an Angular 2 application and want to use pug for my templates. I am using webpack to build the solution.

如果我只是使用

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

在 webpack 配置文件中，图像文件的 URL 不会被重写.所以我试着把哈巴狗改成

in the webpack config file, the URLs of the image files are not rewritten. So I tried to change the pug to

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

但这会导致此错误:

Module build failed: TypeError: require is not a function

所以，我尝试使用以下 webpack 配置:

So, instead I'm trying the following webpack configuration:

{
    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

解决此问题的正确/最佳方法是什么?

What is the correct/best way of solving this issue?

推荐答案

结果我遇到了 pug-html-loader 包中的这个错误.通过使用这个包的不同版本，我让它工作了.

Turns out I was hitting this bug in the pug-html-loader package. By using a different version of this package, I made it work.

这篇关于如何让 webpack 从 pug 重写图像源?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！