webpack 打包图片路径问题，webpack 打包之后给我们的都是 ​​相对路径​​​，但是正是因为是相对路径，所以会导致在 ​​html​​ 中使用的图片能够正常运行，在 css 中的图片不能正常运行

 

例如, 打包之后的路径是, ​​images/BNTang.jpg​​​, 那么在 html 中, 会去 html 文件所在路径下找 ​​images​​​, 正好能找到所以不报错, 但是在 css 中, 会去 css 文件所在路径下找 ​​images​​, 找不到所以报错，目录结构示例如下：

|---bundle
       |---css
            |---index.css
       |---js
            |---index.js
       |---images
            |---BNTang.jpg
       |---index.html

解决方案

在开发阶段将 ​​publicPath​​​ 设置为 ​​dev-server​​ 服务器地址：

然后在利用 devServer 打包，然后在访问一下打包之后的效果如下图所示：

然后在查看图片访问路径地址如下：

在上线阶段将 ​​publicPath​​ 设置为线上服务器地址：