引言
在接触哲哥的699之前，我对工程化的理解就是八股文：
- 懒加载
- Tree Shaking
- 复杂的配置
- 打包优化
只停留在表面，知其然而不知其所以然，在面试官问到的时候往往要绞尽脑汁去思考背的工程化的几个点，一旦深挖就茫然了。
只有做过，理解才会加深，而不是靠背
工程化
什么是工程化
这里不放八股文，只讲自己的理解。
我们的日常用框架来进行开发，最终生成的产物是html, css, js和静态资源，如果没有工程化，我们会面临一系列的问题：
- 打包体积过大，浏览器加载时间长
- js资源过多，触发浏览器同一域名最大并发请求限制
- 重复加载，一些公共模块反复出现在多个js中
这些问题会影响用户的体验，因此，工程化的目的就是配置合理的打包过程，生成的产物能最大程度的保证用户体验
工程化的常见手段有：
- 代码分割
- 模块合并
- 代码压缩
- 多线程打包
- Tree Shaking
听起来很八股文，但是在里程碑二都会涉及到，学完能有个更深刻的理解
实战过程
里程碑二的核心内容是从零配置一个webpack开发、打包的流程，在这个过程中落地工程化的思想，下面将逐一介绍
为什么不用vite？因为webpack需要各种手动配置，在实战中更能了解工程化的思想，在掌握工程化的思维之后，用什么构建工具就不再重要了，我们要掌握的是原理，而不是上层的工具
webpack初始化
webpack是个打包工具，当执行一个打包命令时，他的流程是：
- 加载config配置
- 读取入口文件
- 依赖解析
- loader处理
- plugin处理
- 生成打包文件
首先得配置webpack，这里的基本配置就包括：
-
配置各种loader，如vue-loader, babel-loader, css-loader来帮助webpack解析这些文件
-
配置产物输出路径、路径别名
-
配置插件，如HtmlWebpackPlugin用于生成html文件
-
配置分包策略。常用的分包策略大致分为三种：
- vendor：第三方库。根据node_modules来匹配
- common：公共组件。不能根据name匹配，只要判断它被引用了两次即认为公共模块
- views: 业务组件
这里配置的过程优先级是vendor > common，保证第三方库先分包，公共组件再分包
-
配置模块合并，如果一个文件一次性加载多个文件，则把这些文件合并成一个js，并设置合并模块的最小js大小
webpack打包配置
在上个步骤中，只是配置了webpack基础的配置，但是在开发环境和打包环境下的配置会有些许差别，因此要进一步细化配置
在项目里，打包配置主要做了以下内容：
- 每次打包前清空dist目录
- 多线程打包js，加快打包速度。这里用了HappyPack，用thread-loader也可以
- 去除console.log。防止生产环境出现打印日志引起的内存泄漏
- CSS提取和压缩。使用css-minimizer-webpack-plugin和mini-css-extract-plugin。实测如果不用插件，生成的css会默认注入js文件中，因此需要提取CSS
webpack开发配置
开发和打包不同的点在于，开发需要另外启动一个server（项目用的express），server会把打包后的js, css文件放到内存上，便于HMR
这里的主要内容是：
- 配置dev server的host和port
- 使用webpack-dev-middleware和webpack-hot-middleware分别用于监听文件变化和热更新通知浏览器
- 配置sourcemap，便于定位问题
学习收获
深入理解了工程化的思想，尤其是在开发阶段，打包后的文件是放在内存中，所以HMR的速度会非常快~
深入理解webpack和vite的区别，vite相比webpack，配置确实轻松多了，难怪vite的npm下载量已经超过webpack了，哈哈~
BUT，虽然工具会变，但是底层核心思路仍然不变，感觉哲哥选择webpack来进行教学，让我学到了更多工程化的思想
