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: '/'，则不需要在加载程序选项中使用Html.fromHtml。

在使用Webpack进行服务时以及构建后，如何通过绝对URL使资产可用？

1 个答案: