如何在使用 webpack 服务时和构建后通过绝对 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

以及以下 webpack 配置：

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 没问题，但不适合子目录中的页面。如果我将他们的网址从 / 开始更改为绝对网址，我认为问题将得到解决，但我不知道该怎么做。如果我在加载程序的名称选项前加上 /，则根本无法访问图像。

例如，这就是我在 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: '/'
  }
}

此外，我发现了令人沮丧的失败 - 在 webpack conf 的最后，我有另一个未定义 publicPath 的输出规则，因此它用它重写了正确的规则。作为结论，如果您已经在输出中包含 publicPath: '/'，则加载程序选项中不需要它。

如何在使用 webpack 服务时和构建后通过绝对 url 提供资产？

How to make assets available by absolute url while serving and after building with webpack?

javascript

webpack

assets

webpack-dev-server

serving