Webpack打包

Posted 2023-04-18

参考技术A

（1）WebPack是一个前端资源打包，可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，vue等），并将其打包为合适的格式以供浏览器使用。

（2）用途

（3）同类工具

（1）安装node.js（node.js提供了npm）

（2）安装淘宝镜像

（3）安装打包工具

（4）安装打包配套工具

（1）导出：module.exports = 导出内容

（2）导入：require( \' 文件路径 \' )

（3）打开终端运行：node index.js，查看是否正常输出

5、dev-server

6、alias别名：例如@代替src

Webpack打包图片路径问题

参考技术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 的干扰