这是我参与「第五届青训营 」伴学笔记创作活动的第13天。
今天的课程视频重点围绕构建 Webpack 知识体系展开讲解，我将本节课的课程笔记总结为以下几点：
1.什么是Webpack？
webpack本质上是一种前端资源编译、打包工具，用于现代JavaScript应用程序的静态模块打包。
2.Webpack有哪些能力？
- 编译代码能力。提高效率，解决浏览器兼容问题
- 模块整合能力。提高性能，可维护性，解决浏览器频繁请求文件的问题
- 万物皆可模块能力。项目维护性增强，支持不同种类的前端模块类型，统一的模块化方案，所有资源文件的加载都可以通过代码控制
3.Webpack的构建流程？
webpack 的运行流程是一个串行的过程，它的工作流程就是将各个插件串联起来。
在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条webpack机制中，去改变webpack的运作，使得整个系统扩展性良好。
从启动到结束会依次执行以下三大步骤：
- 初始化流程：从配置文件和 Shell 语句中读取与合并参数，并初始化需要使用的插件和配置插件等执行环境所需要的参数
- 编译构建流程：从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译文件内容，再找到该 Module 依赖的 Module，递归地进行编译处理
- 输出流程：对编译后的 Module 组合成 Chunk，把 Chunk 转换成文件，输出到文件系统
4.如何提高Webpack的构建速度？
常见的提升构建速度的手段有如下：
- 优化 loader 配置
- 合理使用 resolve.extensions
- 优化 resolve.modules
- 优化 resolve.alias
- 使用 DLLPlugin 插件
- 使用 cache-loader
- terser 启动多线程
- 合理使用 sourceMap
