这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天
为什么要学Webpack？
理解前端“工程化”概念、工具、目标。一个团队总要有那么几个人熟悉Webpack，某种程度上可以成为个人的核心竞争力。高阶前端必经之路。
使用Webpack
核心流程
模块化+一致性
1-多个文件资源合并成一个，减少http请求数
2 -支持模块化开发
3 -支持高级JS 特性
4-支持Typescript、CoffeeScript 方言
5–统一图片、CSS、字体等其它资源的处理模型
关于Webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类:
–流程类:作用于流程中某个or若干个环节，直接影响打包效果的配置项
-工具类:主流程之外，提供更多工程化能力的配置项
流程类配置
使用Webpack处理CSS
使用Webpack接入Babel
使用Webpack生成HTML
使用Webpack——工具线
使用Webpack——HMR
Hot Module Replacement——模块热替换
使用Webpack——Tree-Shaking
Dead Code
-代码没有被用到，不可到达
-代码的执行结果不会被用到
-代码只读不写
Tree-Shaking
-模块导出了，但未被其它模块使用
Webpack只认识js，为了处理非标准的JS资源设计出资源翻译模块——Loader，用于将资源翻译为标准JS
使用Loader
认识Loader：链式调用
- less-loader :实现less => css的转换
- css-loader :将CSS包装成类似module.exports = "${css]”的内容，包装后的内容符合JavaScript语法
- style-loader:将css模块包进require语句，并在运行时调用injectStyle 等函数将内容注入到页面的style标签
特点︰
-链式执行
-支持异步执行
-分normal、pitch两种模式
插件是什么？为什么这么设计？
甚至，Webpack本身的很多功能就是基于插件实现的
标题：Webpack 定义解析 - 掘金
