img(src=require(...))生成难看的html

Question

我已经编写了包含以下内容的pug-file：

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="../assets/icons/icon.png">中构建img(src=require("../../assets/icons/icon.png"))应该怎么做？

Answer 1

它需要将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