这是我参与「第五届青训营 」笔记创作活动的第13天
一、本堂课重点内容：
- 什么是Webpack
- Webpack打包核心流程
- Loader组件
- Plugin 组件
- 如何学习Webpack
二、详细知识点介绍：
1、什么是Webpack
针对上述问题，出现了很多工程化工具，某种程度上正是这些工具的出现，才有了"前端工程"这一概念
Webapck本质上是一种前端资源编译、打包工具
- 多份资源文件打包成一个Bundle
- 支持Babel、Eslint、TS、CoffeScript、Less、Sass
- 支持模块化处理css、图片等资源文件
- 支持 HMR + 开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持Tree-shaking
- 支持Sourcemap
2、Webpack打包核心流程
3、认识Loader：链式调用
Loader：为了处理非标准JS资源，设计出资源翻译模块，用于将资源翻译为标准JS
- less-loader：实现less=>css的转换
- css-loader：将CSS包装成类似module.export = "${css}"的内容，包装后的内容符合Javascript语法
- style-loader：将css模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签
Loader的其他特性：
- 链式执行
- 支持异步执行
- 分normal、pitch两种模式
4、理解插件
插件构架精髓：对扩展开放，对修改封闭
插件能够增强产品的生命力，提升产品的可维护性，降低心智成本
Webpack本身的很多功能也是通过插件实现的
学习Webpack的方法
三、实践练习例子：
1、使用webpack示例
关于Webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可以划分为两类：
- 流程类：作用于流程中某个or若干个环节，直接影响打包效果的配置项
- 工具类：主流程之外，提供更多工程化能力的配置项
Tree-Shaking 用于删除Dead Code
开启tree-shaking：mode: "production",optimization.usedExport:true
PS:对工具类库如lodash有奇效
2、如何编写Loader
3、如何编写插件
首先：插件围绕钩子展开
钩子的核心信息：
- 时机：编译过程的特定节点，Webpack会以钩子形式通知插件此刻正在发生什么事情;
- 上下文:通过 tapable提供的回调机制，以参数方式传递上下文信息;
- 交互:在上下文参数对象中附带了很多存在side effect 的交互接口，插件可以通过这些接口改变；
时机：compier.hooks.compilation
参数: compilation
交互：dependencyFactories.set
四、课后个人总结：
- 这堂课学习了Webpack的知识体系，让我对Webpack有了一个比较全面的认知，有很大的帮助。
- 最后面介绍的Webpack学习路线和Webpack关键知识点更是方便了我日后的自主学习。
