【Web前端学习之路】Vue3.0 前端必会框架 （黑马课程笔记01）
1、什么是前端工程化
前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化，实现前端的4个要求：
模块化 (JS的模块、css的模块、其他资源的模块化)
组件化（复用现有的UI结构、样式、行为）
规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理）
自动化（自动化构建、自动部署、自动化测试）
2、webpack基础
- 什么是webpack
webpack是前端项目工程化的具体解决方案，提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器JavaScript的兼容性、性能优化等强大功能。提高了前端开发效率和项目的可维护性。
- webpack 的安装
- webpack 的配置
① 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：
mode 可选值的区别：
② 在 package.json 的 scripts 节点下， 新增 dev 脚本如下（dev就是代替脚本的名字）：
- 修改 webpack 的打包入口和出口配置
在 webpack.config.js 配置文件中，通过 entry 节点指定 打包的入口，通过 output 节点指定打包的出口。
项目实时更新与打包
安装 webpack-dev-server 可以自动进行项目的打包和构建。
安装最新版本 webpack-cli 进行自动打包，同时还要修改 package.json中的 scripts改成“dev”:"webpack serve" 这样运行 npm run dev 才会实时监听源代码的变化，再自动打包
注意：不进行自动打包时生成的文件会存放到实际的物理磁盘上，是根据 output 节点的指定路径进行存放；而配置的实时自动打包的插件之后，打包生成的文件则存放到了内存中，这样可以提高实时打包输出的性能，因为内存比物理磁盘速度快很多。
自动打包生成到内存的文件默认放到了项目的根目录中，且是虚拟的、不可见的。可直接访问
（/就代表根目录）
在webpack.config.js配置文件中，可以通过 devServer 节点（写在 module.export中）对 webpack-dev-server 插件进行更多的配置：
webpack 中的 HTML 插件
html-webpack-plugin 是 webpack 中的HTML 插件，可以通过此插件自定制 index.html 页面的内容。在 webpack.config.js 中添加如下：
loader 加载器
在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块，其他非 .js后缀名结尾的模块需要调用 loader 加载器才可以正常打包。
例如打包处理 css 文件
① 运行 npm i [email protected] [email protected] -D 命令（版本号自定义），安装处理css文件的loader
② 在 webpack.config.js 中再添加 module 节点（写在 module.export中），其rules 数组规则如下：
test 是表示匹配的文件类型，use 是表示对应要调用的 loader
注意： use 数组中指定的loader 顺序是固定的（先写style-loader），且多个loader 的调用顺序是从后往前
配置 webpack 的打包发布
在 package.json 文件的 scripts 节点下，新增 build 命令
--mode 是一个参数项，用来指定 webpack 的运行模式，production 模式下，会对打包生成的文件进行代码压缩和性能优化。此处的 --model 参数会覆盖 webpack.config.js中的 model 选项
Source Map
前端项目在投入生产环境之前，都需要对 JavaScript 源代码进行压缩混淆，从而减小文件的体积，提高文件的加载效率，此时 对压缩混淆之后的代码进行除错（debug）就变得十分困难。
而 Source Map 是一个信息文件，里面存储着位置信息，即代码压缩混淆前后对应的位置关系。
在 webpack.config.js 中添加 devtool：‘eval-source-map’（写在 module.export中），即可保持运行时报错的行数与源代码的行数一致。显示的也是源代码，这样就方便调试。
若只想定位报错具体行数，而不想暴露源码，则可以将devtool的值改为 nosources-source-map
若想定位报错具体行数，同时展现具体报错源码，则可以将devtool的值改为 source-map