webpack打包图片路径配置问题

Question

我的项目打包之后的dist目录

1、css目录下的css文件有背景图片 background-image: url('../images/XXX');

2、React 代码中也有图片 <img src={require("./images/XXX.jpg")}/>

注：由于我项目的架构，上面两个images不是同一个文件夹。

问题是：
我打包之后把所有图片都放在了images目录下
那么前面两种情况访问images中的图片路径会不一样

1、../images/XXX.jpg
2、images/XXX.jpg

那么我在webpack的配置文件中要如何配置？

test: /\.(png|gif|jpg|jpeg|bmp)$/i,
use: {
  loader: 'url-loader',
  options: {
    limit: '8192',
    outputPath: 'images/'
  }
}

Answer 1

把图片路径设置为从根目录开始
你试一下：

test: /\.(png|gif|jpg|jpeg|bmp)$/i,
use: {
  loader: 'url-loader',
  options: {
    limit: '8192',
    outputPath: 'images/',
    publicPath : '/images'
  }
}

加上这个publicPath

Answer 2

既然你用了 url-loader 那么你应该知道如果文件字节超过 limit 值会是什么结果。简单来说，大小超过 limit 值的资源会被复制到输出目录，然后重写引用路径。这时候你可以用 publicPath 给资源定义重写后的基本路径，跟 output.publicPath 的意义类似。而 outputPath 中的值如果是相对路径则是在 dist 为父级目录的基础上进行配置。

所以 loader 配置是这样的：

{
    test: /\.(png|gif|jpg|jpeg|bmp)$/i,
    use: {
      loader: 'url-loader',
      options: {
        limit: '8192',
        outputPath: 'images/',
        publicPath: '/dist/images/'
      }
    }
}

资源会被输出到 dist/images 目录中，引用地址被重写为：

background-image: url('/dist/images/images/XXX');