前言
本文为个人学习笔记，跟着哲哥(抖音：哲玄前端)学全栈之前端工程化, 在当今的前端开发领域，随着项目规模的不断扩大和业务需求的日益复杂，前端工程化已成为提升开发效率、保证项目质量和可维护性的关键因素。工程化包含模块化(ES Module, CommonJS)、组件化(组件库...)、构建工具(webpack, view, rollup..)、代码质量保障(eslint...), 依赖管理(pnpm, yarn, npm...), CI/CD 等多方面内容。本文主要讲的关于构建的思想，让妈妈再也不用担心我夜深人静的时候独自对着天空长叹一声学不完，根本学不完。
正文
在讲正文前，我们先看一下下面这张图，了解一下构建工具整个构建大致过程，然后在对每个过程进行详细的讲解
入口
入口的配置是告诉构建工具从哪个文件开始解析，然后递归解析文件中的import、require语句，形成模块依赖关系树。
loader
loader是构建工具最重要的东西，没有它就没有构建工具的存在，它的主要功能就是把我们写的浏览器没办法识别的东西转化成能识别的东西，如 less 通过 less-loader(只是名字，可能不同工具名字不同) 转换成css.有了他我们就可以尽情的写出更快，更方便，更好维护的代码。构建过程是在上面提到的递归中，会根据模块的类型调用对应的loader。
plugin
plugin是构建工具中一个锦上添花的东西，他借用在构建工程工程中暴露出来的钩子工作的，在不同阶段能做不同的时，如：在构建前可以清理上次构建的产物等，在构建中可以替换一些环境变量，tree-sharking等，在构建结束可以压缩代码、模块分包、文件缓存、分析打包结果等。
出口
出口的配置是告诉构建工具上述打包结果输出的位置，除这个主要功能外，还可以配置输出模式，如 umd, commonjs, module等，常用于组件库需要支持多种模式导入。
体积优化
体积优化的话跟构建流程没有关系了，和下面的速度优化一起属于性能优化方面的，随着项目的复杂度上升，相应的打包输出的体积就回变大，从而导致项目加载速度变化。优化思路分为以下几点：
- 去掉代码 -- tree-sharking, 去掉项目中的打印，注释, extensions(如 echars)等。
- 压缩 -- 对js,css,图片等压缩，gizp。
- 分包 -- 把大的文件根据类型，引入次数拆分成小的资源，如：node_modules, 变化较少的工具类内容，提取css文件等。
速度优化
* 上面谈到的体积优化造福的对象是用户，那么现在要讲的速度优化造福的就是你自己了，只要你项目启动的快，打包的快，你就能愉快的摸更多的鱼。优化思路也来几点：
- 缓存 -- 只要有缓存就不需要再次走打包流程。
- 多线程 -- 一个不够那我就多来几个，当然也不是越多越好。
- 热更新 -- 该优化只在开发环境。
- 忽略 -- 可以忽略一些不用构建的文件，如 loader的exclude，忽略moment的无用语言包
其他
除了上面的一些内容的话，还有一些其他的配置，如 别名常配置的src -> @, 代理 proxy等。
总结
构建工具主要就这些内容了，最后我在梳理一下，我们拿到项目该如何配置，不管你用的是什么构建工具，是webpack,vite,rollup，还是最新出的rolldown. 配置思路如下：
- 入口文件路径 -- 一般是 entry, 可以是单个，也可以是多个，具体看你项目需求。
- 配置loader -- 根据你项目的内容，文件类型配置对应的loader。
- 出口路径 -- 更一个你打包后文件的存放的文件夹路径，一般是 dist。
- 配置plugins -- 配置一些需要的插件，如：生成浏览展示的页面文件注入打包后的资源(webpack-HtmlWebpackPlugin, rollup-@rollup/plugin-html)
- 优化方面的配置 -- 压缩，提取，分包，去掉代码，开启缓存，多线程打包，热更新等
- 其他配置 -- 别名，代理，分析插件(如：每个模块打包的体积，速度，大小等)
大致的配置配置应该就上面这些，如果你使用的是cli工具生成的项目的话，很多内容都是默认配置好的，然后对照上面的思路，根据你的需求，去官网找相关配置就可以了。
结尾
到此本文就结束了，希望能给大家带来帮助，也希望能给那些该使用什么打包工具的人解惑，如果有时间的话我在把个人打包工具的配置配一下放到github上(也可能是个饼), 当然如果有错误的地方也希望大佬指点，我为大佬点香烟，大佬赐我福泽绵。
注：抖音 “哲玄前端”，《大前端全栈实践课》
