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="{&quot;default&quot;:&quot;../assets/icons/icon.png&quot;}">

当我打开包含此内容的 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,}
      }
    ]

我在这里找到了这个答案：https://ru.stackoverflow.com/questions/1091138/webpack-2-pug-%D0%BD%D0%B5-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D0%B5%D1%82-require