Загрузчик файлов Webpack не обновляет путь к ресурсам в файле HTML

Question

Итак, в моем шаблоне мопса у меня есть:

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

Я импортирую это изображение в свой скрипт. Он отправляет файл в папку assets / files с правильным именем и хэшем, но не обновляет атрибут src в выходном HTML-файле. Остаётся так:

<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"
            }
          }
        ]
      }