3

我有以下输出项目结构：

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'
  })
]
...

问题是我所有的图片网址都只是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文件夹中。

4

1 回答 1

1

添加publicPath: '/'到加载器选项已经解决了这个问题：

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

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

于 2018-12-22T11:50:18.473 回答