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")
用相对路径是会有这个问题,两种解决方案:
源码图片路径和打包后的图片路径保持一致,比如:源码图片是放在/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放到前面,就不会有路径问题了
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。