javascript - 关于webpack里面图片打包的路径问题

Question

output: {
        path: path.resolve(__dirname, "./build"),
        filename: js/[name].js",
        publicPath:""
    },
loaders: [{
        test: /\.(png|jpg|jpeg|gif)$/,
        loader: 'url?limit=10000&name=img/[name].[ext]'
}]

配置差不多就是这样子，我这样打包出来以后无论怎么调配置，css里面的图片引用路径都是
background: url("/img/XXX.png") no-repeat;这样就会在根目录下面找img文件夹，但是我不想这样，能不能使他打包出来成这样=> background: url("../img/XXX.png") no-repeat;就是可以自定义css里面url的引用路径（前面多2个点）

url("/img/XXX.png")=====> url("../img/XXX.png")

Answer 1

用相对路径是会有这个问题，两种解决方案：

1. 源码图片路径和打包后的图片路径保持一致，比如：源码图片是放在/src/img/a.png下,引用图片的的css路径是/src/style/a.css, 这时候a.css的引用写法是 url("../img/a.png");
   打包后的图片路径是放在/build/img/a.png,引用图片的的css路径是/build/style/a.css, 这时候a.css的引用写法还是 url("../img/a.png")，这时候就不会出问题

2.webpack.config.js使用绝对路径publicPath：

output: {
        publicPath:'/'
}

这样所有资源文件的路径都会把publicPath放到前面，就不会有路径问题了

Answer 2

试试:

        loader: 'url?limit=10000&name=../img/[name].[ext]'