Webpack的文件加载器不会更新HTML文件中资产的路径

Question

所以，在我的哈巴狗模板中，我有：

img(src="../img/myimage.png", alt="image")

我将此图像导入到脚本中。它会使用正确的名称和哈希将文件继续到文件夹资产/文件中，但是不会更新输出HTML文件中的src属性。保持这样：

<img src="../img/myimage.png" alt="image">

这是module.rules：

module: {
    rules: [
      {
        test: /\.(html)$/,
        use: {
          loader: "html-loader"
        }
      },
      {
        test: /\.pug$/,
        use: ["pug-loader"]
      },
      {
        test: /(manifest.json)|(^old\/.+)|(\.(png|jpg|gif|woff|woff2|eot|ttf|otf|mp4|ico|svg|webp))$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name]-[hash].[ext]",
              outputPath: "assets/files"
            }
          }
        ]
      }
    ]
  }

可能是什么问题？

Answer 1

您需要在文件加载器中设置publicPath：

      {
        test: /(manifest.json)|(^old\/.+)|(\.(png|jpg|gif|woff|woff2|eot|ttf|otf|mp4|ico|svg|webp))$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name]-[hash].[ext]",
              outputPath: "assets/files",
              publicPath: "some/path"
            }
          }
        ]
      }