这是我参与「第五届青训营 」笔记创作活动的第9天。
一、重点内容
- webpack介绍
- webpack打包流程
- loader组件
- plugin插件介绍
二、详细知识点介绍
什么是webpack？
webpack本质上是一种前端资源的编译、打包工具。 将非JS文件编译变成JS内容；多份资源文件打包成一个Bundle(当时不支持esn)。
webpack打包核心流程
1.入口处理
输入'entry' 'context'
2.依赖解析
模块解析'resolve''externals'
3.资源解析
模块转译'module'
（递归调用2、3直到所有资源处理完毕）
4.资源合并打包
后处理'optimization''mode''target'
webpack的使用方法，基本都围绕“配置”，配置可分为两类：1.流程类：作用于流程中若干个环节，直接影响打包效果的配置项。2.工具类：主流程之外，提供更多工程化能力的配置项。
loader组件
组件运行步骤
- 因为webpack只认识JS。为了处理非标准JS资源，设计出资源翻译模块（用于将资源翻译成JS）——Loader less-loader:实现less到css的转换。
- css-loader:将CSS包装成类似module.exports="${css}"的内容，包装后的内容符合JS语法
- style-loader:将CSS模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签。 其他特性：链式执行，支持异步执行，分normal/pitch两种模式
plugin插件
plugin可以扩展webpack的功能，让webpack有更多的灵活性。在webpack运行的生命周期中会广播出许多事件，plugin可以监听这些事件，在合适的时机通过webpack提供的API改变输出结果。
为什么要设计插件？
1.新人需要了解整个流程细节上手成本高。
2.功能迭代成本高，牵一发动全身。
3.功能僵化，作为开源项目而言缺乏成长性。
插件架构精髓
对扩展开放，对修改封闭。
hooks钩子
钩子的本质是事件。为了方便开发者直接介入和控制编译过程，Webpack 把编译过程中，触发的各类关键事件，封装成事件接口暴露了出来，这些接口被很形象地称做：hooks（钩子）
三、个人总结
webpack是一个现代的使用广泛的打包工具，作为前端开发者，虽然学习前端的初期不是必须掌握，但是也是迟早需要学习的，那么不如在学习的过程中就对它进行一些初步的了解和学习，这样能够方便构建自己的知识体系。
