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

Question

因此，在我的pug模板中，我有：

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

我将此图像导入到我的脚本中。它确实会使用正确的名称和散列将文件移到assets/files文件夹，但不会更新输出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"
            }
          }
        ]
      }