Webpack打包图片路径问题

Posted 2023-03-18

参考技术A 配置

其中

outputPath 负责输出目录, 即打包后的写在磁盘的位置.

publicPath 则是对页面引入资源的补充,比如 img 标签引入或者 css 引入等.

按上面路径配置时, 打包后文件都在 build/img

开发环境 下可以正确引入文件,引入路径为 localhost:8080/img

生产环境 下引入路径为 f:///img 导致找不到图片

output : 指定将放置目标文件的文件系统路径. 这跟我们遇到的文件没多大关系.那问题就是在 publicPath

publicPath : 指定目标文件的 自定义公共 路径,它是定义公共路径,所以我们在开发模式下能正确引入文件,因为都在同一个路径下,即 localhost:8080 .

别忘了我们引进图片有两种方式, img 标签或者 css 引入.

当我将 file-loader 路径配置修改为

因为打包后目录结构是

结果通过 css 引入的图片打包后还可以正确引入,路径是 ../img
但是通过 img 标签引入的图片则报错,引入路径是 项目根目录/img ,正确的应该是 项目根目录/build/img

我们看看打包后的 js 中的引入路径

看起来好像是正确的,但是有一点, CSS 和 JS 引入图片的机制是不一样,详细可以看 css和js引用图片的路径问题

我们已经找到问题所在了, 那么该如何解决呢?

不设置 file-loader 的 outputPath 和 publicPath ,默认跟随 webpack 的打包目录, 这还不够,我们还得将 css 文件也打包到跟图片文件同级.

打包后目录为

这样不管是 生产环境 还是 开发环境下 都能正确引入图片.

但是当图片多了之后 build 目录下会有很多的文件,我们还是希望图片文件打包后在 img 文件夹.让我们再来看看这该怎么解决.

我们已经知道了设置了 file-loader 下的 publicPath 就是 css 文件与 js 文件引入图片的路径,因为 css 和 js 引入的机制不同,我们只需要将 css 文件打包之后与 html 同级即可.

修改 webpack 配置

修改前

修改后

打包后目录结构

完美解决.

修改 extract-text-webpack-plugin 的options以及 file-loader 的 publicPath

打包后的目录

根据两个文件夹的位置关系, 我们设置 extract-text-webpack-plugin

移除 file-loader 的干扰