Webpack 的文件加載器不會更新 HTML 文件中資產的路徑

Question

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

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

我在我的腳本中導入這個圖像。 它確實將文件轉到具有正確名稱和 hash 的文件夾 assets/files，但它不會更新 output 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"
            }
          }
        ]
      }