Vue2.00.WebPack
本次系统学习以黑码教程为主, 后期随笔中不特殊说明均为黑马教程内容
01. 对webpack的了解
a. webpack 是前端项目工程化的具体解决方案;
b. 主要功能:
1.提供友好的 前端模块化开发 支持;
2. 代码压缩混淆;
3. 处理浏览器端 javascript 的兼容性 、 性能优化;
c. 好处:
1. 开发人员重心放到 功能的实现 上;
2. 提高前端开发效率;
3. 强化项目 可维护性;
d. 当前,Vue、React 等主流的前端框架,基本上都是基于 webpack 进行工程化开发的;
02. webpack 的基本使用
>> webpack项目的构建, 抛出问题;
a. 依据项目名称,新建一个空白的文件夹,并在命令行中,输入 npm init -y , 初始化包管理配置文件 package.json
b. 在项目文件夹下,新建源码文件夹 src
c. 通过 VSCode打开项目文件夹,并添加文件 index.html 和 index.js
d. 初始化首页结构
e. 安装jQuery ( npm install jquery -S )
-S (--save)参数: 表示将jquery放置到 package.json 文件中的 dependencies 项中;
不配置这个参数,也是可以安装到 dependencies中,加上 -S 语义更明确;
f. 通过ES6模块化的方式,导入jQuery,实现列表的隔行换色
>> webpack 在项目中的安装
a. 项目中安装 webpack
npm install webpack@latest webpack-cli@latest -D
-D (--save-dev): 将依赖包安装到 devDependencies 下
不同的依赖包,具体是使用-S, 还是使用 -D, 可以参考 npmjs.com 中的说明, 在 npmjs.com 中搜索相应的包,看对应包的官方安装示例;
b. 配置 webpack
> 项目根目录中,创建名为 webpack.config.js 的 webpack 配置文件,并初始化基本配置项
webpack二种不同的运行模式区别
development: 追求的是打包速度,在结果文件main.js中不会压缩文件,文件体积大;
production: 追求的是后期应用的速度, 会对文件进行压缩,此时打包速度慢,但文件体积小,便于后期网络传输;
> 使用 webpack 进行处理后,重新引入处理后的js,完成隔行换色效果 (main.js 中同时包含了 index.js 和 jquery.js 中的内容)
c. webpack 在运行时,如何知道支打包哪些JS文件
>> 在 webpack 4.X, 5.X的版本中,有如下的默认约定
1). 默认的打包入口文件为: src/index.js
2). 默认的输出路径为: dist/main.js
>> 默认情况下,如果找不到 src 路径或没有 index.js 文件,将会报错
>> 上述二项内容,均可以在 webpack.config.js 中进行配置,修改为指定的文件
(此时,因为输出文件名变更了,index.html 中的引用,也需要同步修改为 bundle.js)
03. 在上述基础上,每次修改 源码,都需要手动 编译一次 (npm run dev) ,有些麻烦,通过安装相应的插件,可完成自动编译处理
>> webpack-dev-server 插件安装
>> 修改 package.json 配置 (加上 serve 后,实现 webpack 实时 自动打包功能)
>> 注意事项
1). webpack-dev-server 插件,实时编译的内容存放在内存中,并不在磁盘上,index.html中对 bundle.js 的引用,需要修改为 /bundle.js
2). 要实时查看源码变更后的效果,需要使用 webpack-dev-server提供的指定服务,而不再是右键打开 index.html
3). 在教程中,此时 http://localhost:8080 是可以打开目录的,但在自己电脑上,是直接提示
处理方式:修改 webpack.config.js, 添加上 devServer 配置项
此时可以打开目录, (黑码教程中可以直接打开目录结构)
修改配置项,让打开时,直接进入页面展示 (转码教程中是 通过 html-webpack-plugin 来实现打开时,直接展示页面的)
此时,所有源码的变更,将实时展示效果
>>黑马教程中对页面的直接展示方式,是通过 html-webpack-plugin 来实现的,对 其配置如下 (配置在 webpack.config.js 中)
将插件,配置到 plugins 中
在完成上述配置后,达到的效果就是直接输入: http://localhost:8080 时,直接展示页面效果 (自己是直接使用了 devServer 配置项达到这个效果的 )
html-webpack-plugin 作用
04. 运行 webpack 后,自动打开浏览器的配置
完成上述配置后,再次运行 npm run dev 时,将直接自动打开浏览器,使用的地址为: http://127.0.0.1:80 进行打开;
05. webpack中的locader
>> loader 的概述:
webpack 默认只能处理 .js 后缀文件,无法处理其它后缀文件;
此时需要调用 loader 加载器才可以正常的打包;否则会报错;
>> loader 加载器的作用:
协助 webpack 打包处理特定的文件模块;
* css-loader 可以打包处理 .css 相关文件;
* less-loader 可以打包处理 .less 相关文件;
* babel-loader 可以打包处理 webpack 无法处理的高级JS语法
>> loader 调用过程
>> 在src目录下新建css/index.css ,同时在 webpack 入口文件中(index_abc.js) 导入CSS, 此时运行 npm run dev 将报错 (提示需要合适的 loader 来解决 css 文件的打包)
06. CSS文件的打包处理
>> 安装 CSS 相关 loader
npm i style-loader@latest css-loader@latest -D
>> 在 webpack.config.js 中的 module > rules 数组中,配置 loader 的规则;
** 在 rule 中,通过 test 匹配相应的正则表达式, use 相应的 loader
** use 数组中指定的 loader 顺序是固定的;
** 多个 loader 的调用顺序,是从右向左调用;
** style-loader 必须在 css-loader 前面
>> CSS加载器处理后的效果
>> css加载器处理逻辑
07. LESS加载器的处理
>> 配置less文件
>> webpack入口文件 index_abc.js 中导入less文件;
此时 webpack 打包,将提示 less 文件相关错误
>> 安装 less 打包相关加载器并配置好匹配规则
** less 只是 less-loader的内部依赖,并不会在匹配规则中使用到
>> 最终效果
08. 打包处理 样式表中 与 URL 路径相关 的文件 (图片)
>> 在 html 中配置 图片容器
>> 在webpack入口文件中,导入图片,并配置 src属性
>> 此时打包,将出现错误
>>
在 Webpack5 之前,加载资源需要使用一些 loader,比如 raw-loader、url-loader、file-loader;
从 Webpack5 开始,我们可以直接使用资源模块类型(asset module type),来替代上面的这些 loader。
![](https://img2023.cnblogs.com/blog/440660/202212/440660-20221226145034394-1138483674.png)
>> 可正常展示图片
>> 在 webpack5下,同样可以使用 loader 来实现图片打包
* 安装 loader
* 配置 webpack.config.js (module > rules 中添加 )
09. 项目开发完成后的打包发布
>> package.json 配置
build: 这个名称自定义
webpack 表示要调用 webpack 进行打包
--mode 用于指定 webpack 的运行模式;命令行参数优先级高于 webpack.config.js 中配置的参数
(一般将默认模式 mode:development 配置在 webpack.config.js 中,打包时,将mode配置到命令行参数中)
>> webpack打包后的JS,统一存放在指定路径下
打包后,JS文件被存放到了 js 目录下
>> 此时直接打包,将发现,html 文件未被打包到 dist 目录下
>> 若需要打包 html 文件,需要使用到插件 html-webpack-plugin
>> 在 webpack.config.js 中引入 插件 并配置
>> 此时发布模式打包后,html文件与js文件,均可打包出来
在 index.html 中,自动引入了打包的js
>> 打包时,自动清理 dist 目录
** 上述打包方式下,为了避免文件之间的干扰,都会需要手动删除 dist 文件夹后再进行打包,有些麻烦;
** 要实现每次打包时,自动清理掉 dist 文件夹中的旧文件,可以使用插件:clean-webpack-plugin
** webpack.config.js 中配置插件
** 此时在使用 npm run build 进行打包时, 将自动清理原有文件 ;
10. Debug 处理插件 source-map
>> Source Map 的了解
Source Map 就是一个信息文件,里面储存着位置信息;(压缩混淆后的代码 与 转换前 源代码位置 的对应关系)
在开发模式下, webpack 默认启用了 Source Map 功能;
点击上图蓝 框,可跟踪到代码
从源码跟踪也可发现,Source Map 报错时,文件定位是准确的,但记录的位置,是打包后文件的位置,不是源文件的位置,不利于Bug跟踪及修正;
>> webpack.config.js 配置参数,以确保 出现Bug时,对Bug位置的记录与源文件保持一致
** 配置参数后,再次开发模式下运行
** 点击跟进后,直接打开了源文件代码,全球Bug定位及修复
>> 在生产环境下,如果没有配置 devtool 参数,则在最终生成的文件中不包含 Source Map 的相关内容,此时可确保源码不会暴露给外部人员;
此时报错点为发布模式下,混淆后的内容位置,是不方便定位Bug的;
>> 这种模式下,可以有效的保护好源代码,但同时也为自己的开发,增加了Bug调试困难;
** 修正处理方式:在生产环境中,只提供Bug错误的位置,但不提供源码定位;
** 效果
** 点击跟进 (此时是无法定位Bug异常点的)
>> 生产环境下,如果想在定位报错行数的同时,展示具体报错的源码,可以将 devtool 设置为 source-map
(此时的效果,与 devtool:'eval-source-map', 一样, 定位错误点,同时定位源码)
>> 关于Source Map 的使用规则建议
11. 关于文件之间相对位置引用的优化处理
>> 在开发中,CSS,JS, 图片等信息的引用,往往是基于文件本身,通过 ./ 或 ../ 等相对于文件自身位置后去取引用文件,这种 由内向外去匹配引用的方式,在层级较深时,非常的不方便,
>> 本处 提供一种 使用 @ 基于 src 目录,由外向内的引用方式
>> 配置 webpack.config.js
>> 使用方式