Как сделать ресурсы доступными по абсолютному URL при обслуживании и после сборки с помощью веб-пакета?

Question

У меня есть следующая структура выходного проекта:

img
  ...
portfolio
  masttech
    index.html
  index.html
...
index.html

И следующая исходная структура проекта:

components
  ...
  Portfolio
    img
      ...
    Masttech
      img
        ...
      index.js
      template.pug
      style.sass
    index.js
    template.pug
    style.sass
  Index
    img
      ...
    index.js
    template.pug
    style.sass
  layout.pug
index.js

И следующий конфиг веб-пакета:

context: __dirname,
entry: [
  './src/index.js'
],
output: {
  filename: 'main.js',
  path: path.resolve(__dirname, 'dist'),
  publicPath: '/'
},
devServer: {
  publicPath: '/'
},
module: {
  rules: [
    ...
    {
      test: /\.(png|svg|jpg|jpeg|gif)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 8192,
            name: 'img/[name].[hash:7].[ext]'
          }
        }
      ]
    }
  ]
},
plugins: [
  ...
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: './src/components/Index/template.pug'
  }),
  new HtmlWebpackPlugin({
    filename: 'portfolio/masttech/index.html',
    template: './src/components/Portfolio/Masttech/template.pug'
  })
]
...

Проблема в том, что все мои URL-адреса изображений просто img/...это нормально для index.html находится в корне, но не подходит для страниц внутри подкаталогов. Если бы я изменил их URL-адреса на абсолютные, начиная с / Я думаю, что проблема будет решена, но я не знаю, как это сделать. Если я префикс имени загрузчика с /, изображения не могут быть доступны вообще.

Например, вот как мне нужно изображение внутри src/components/Portfolio/Masttech/template.pug: img(src=require('./img/pic__structure.png')Во время подачи он превращается в img/pic__structure.7b94b5f.pngтак что к нему нельзя получить доступ с выхода img каталог с img папка находится в корне, а страница находится в portfolio/masttech папка.

Answer 1

Добавление publicPath: '/' Чтобы параметры загрузчика решили проблему:

{
  loader: 'url-loader',
  options: {
    limit: 8192,
    name: 'img/[name].[hash:7].[ext]',
    publicPath: '/'
  }
}

Более того, я обнаружил, что мой разочаровывающий сбой - в самом конце веб-пакета conf у меня было другое правило вывода, в котором publicPath не был определен, так что оно переписало правильное правило вместе с ним. В заключение, вам не нужно publicPath: '/' в настройках загрузчика, если он у вас уже есть.