且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2022-10-29 22:00:25

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

  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放到前面,就不会有路径问题了