webpack - img(src=require(...)) 生成丑陋的 html
问题描述
我已经用下一个内容编写了 pug 文件:
img(src=require("../../assets/icons/icon.png"))
并尝试使用下一个 webpack 配置通过 Webpack 将其构建为 html:
module: {
rules: [
{
test: /\.pug$/i,
use: {
loader: 'pug-loader',
options: {
pretty: true
},
},
},
....
{
test: /\.(png|jpg|svg|jpeg|gif)$/,
exclude: [
/Montserrat-Bold.svg$/,
/Montserrat-Regular.svg$/,
/Quicksand-Regular.svg$/,
],
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "assets/icons/",
publicPath: '../assets/icons/'
}
}
]
},
.....
结果,它构建成
<img src="{"default":"../assets/icons/icon.png"}">
当我打开包含此内容的 html 页面时,图像不会加载。
我应该怎么做才能img(src=require("../../assets/icons/icon.png"))
建成<img src="../assets/icons/icon.png">
?
解决方案
它需要添加esModule: false
到文件加载器选项:
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "assets/icons/",
publicPath: '../assets/icons/',
esModule: false,
}
}
]
推荐阅读
- c++ - 意外调用 C++ 中的默认构造函数
- php - Mysql给我不正确的时间
- ios - 当 URLSessionDownload 任务失败时,从委托方法中收到的错误对象中获取 resumeData
- python - 将数据从 Spark 保存到 MongoDB 和 Mysql
- swift - 单击按钮时 - 在 IOS 上用 Swift 打开电子邮件程序
- javascript - 如果 body 包含某个类并且元素 id 包含一个类,如何将 id 添加到元素
- javascript - 在 .NET Core Web 应用程序中执行 Node.JS 代码
- python - 如何使这段代码干燥?
- python - 从 json 中删除 \r
- ios - 条码不生成