webpack-图片路径问题

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 服务器地址：

image-20211119203201937

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

image-20211119221023216

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

image-20211119221116025

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

image-20211119221224422

End

我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表