这是我参与「第四届青训营 」笔记创作活动的第11天
什么是Webpack
本质上是一种前端资源编译、打包工具
多份资源文件打包成一个 Bundle
支持: Babel、 Eslint、TS、CoffeScript、 Less、Sass
支持模块化处理css、图片 等资源文件
支持 HMR ＋ 开发服务器
支持持续监听、持续杓建
支持代码分离
支持 Tree-shaking
支持 Sourcemap
使用Webpack
关于 webpack 的使用方法，基本都围绕“配置”展开，市这些配置大致可划分为两类：
流程类：作用于流程中某个 or 若干个环节，直接影响打包效果的配置项
工具类：主流程之外，提供更多工程化能力的配置项
Dead Code
代码没有被用到，不可到达
代码的执行结果不会被用到代码只读不写
Tree-Shaking
模块导出了，但未被其它模块使用
认识Loader：链式调用
less-loader ：实现 less =>ass 的转换
css-loader：将Css 包装成类似 module.exports ="${cssy" 的内容，包装后的内容符合 JavaScript 语法
sstyle-loader：将css 模块包进require 语句，并在运行时调用 injectstyle等函数将内容注入到页面的 style 标签
理解插件
插件是什么？为什么这么设计？
很多知名工具，如：VS Code, Web Storm, Chrome, FirefoxBabel, Webpack, Rollup, Eslint Vue, Redux, Quill, Axios
等等，都设计了所谓“插件”架构，为什么？
这是一个特别复杂的过程，那么：
新人需要了解整个流程细节，上手成本高功能迭代成本高，牵一发动全身功能僵化，作为开源项目而言缺乏成长性Blabla
心智成本高=＞可维护性低=＞生命力弱
插件架构精髓：对扩展开放，对修改封闭
甚至，Webpack 本身的很多功能也是基于插件实现的
钩子的核心信息
1.时机：编译过程的特定节点，Webpack 会以钩子形式通知插件此刻正在发生什么事情；
2.上下文：通过tapable 提供的回调机制，以参数方式传递上下文信息；
3.交互：在上下文参数对象中附带了很多存在side effect 的交互接口，插件可以通过这些接回改变；
学习方法
01.入门应用
理解打包滚程
熟缭篆握常用配置项、Loader、插件的使用方法能够灵活搭建集成Vue. React, Babel. Eslint, LessSace图片处理等工具的 Webpack 环境
掌握常见脚手架工具的用法，例如：Vue-cli、react-app, @angular/cli
02，进阶
理解 Loader、Plugin 机制，能够自行开发 Webpack組件
理解常见性能优化手段，井能用于解决实际问题
㻫解前端工程化概念与生态現狀
03.大师级
阅读源码，理解 Webpack 编译、打包原理，甚至能够参与共建
