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。
>> 可正常展示图片
>> 在 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
>> 使用方式
