这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天，今天学习的是Webpack知识体系，将所学习的知识记录下来，以便时时巩固记忆。
学习的内容
- 什么是Webpack
- Webpack打包核心流程
- Loader组件
- Plugin组件
- 如何学习Webpack
什么是Webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
Webpack打包核心流程
- 入口处理： 从"entry"文件开始，启动编译流程。
- 依赖解析： 从"entry"文件开始，根据"require" or "import"等语句找到依赖资源。
- 资源解析： 根据"module"配置，调用资源转移器，将非标准JS资源转译为JS内容。
- 资源合并打包： 将转译后的资源内容合并打包为可直接在浏览器运行的JS文件。
Webpack配置：
流程类： 作用于流程中某个or若干个环节，直接影响打包效果的配置项。
工具类： 主流程之外，提供更多工程化能力的配置项。
Loader组件
常用的两种Loader组件
style-loader
用途：用于将css编译完成的样式，挂载到页面style标签上。需要注意loader执行顺序，style-loader放到第一位，因为loader都是从下往上执行，最后全部编译完成挂载到style上。
css-loader
用途：用于识别.css文件，处理css必须配合style-loader共同使用，只安装css-loader样式不会生效。
Plugin组件
钩子的核心信息：
- 时机：编译过程的特定节点，Webpack会以钩子形式通知插件此刻正在发生什么事情。
- 上下文：通过tapable提供的回调机制，以参数方式传递上下文信息。
- 交互：在上下文参数对象中附带了很多存在side effect的交互接口，插件可以通过这些接口改变。
