Webpack知识体系 | 青训营笔记
这是我参与「第五届青训营 」笔记创作活动的第5天
一、Webpack本质与功能
Webpack本质上是一种前端资源编译、打包工具
功能：
- 多份资源文件打包成一个Bundle
- 支持Babel、Eslint、TS、CoffeScript、Less、Sass
- 支持模块化处理CSS、图片等资源文件
- 支持HMR + 开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持 Tree-shaking
- 支持 Sourcemap
二、Webpack的使用
1.安装
npm i -D webpack webpack-cli
2.编辑配置文件
例子：
3.执行编译命令
npx webpack
三、webpack 配置文件编写
配置总览
1.流程类
entry： 配置入口文件
output: 生成的文件名和目录
(1)处理CSS
(2)接入Babel
(3)生成HTML
2.工具类
（1）HMR--热模块替换
不用刷新即可更新页面
（2）Tree-shaking
(3)其他工具
例如：缓存、Sourcemap、性能监控、日志、代码压缩、分包
四、Loader理解
Loader:为了处理非标准JS资源，设计出的资源翻译模块
1.使用Loader
2.认识Loader
（1）链式调用
以less文件处理为例：
（2）其他特性
- 支持异步执行
- 分normal,pitch两种模式
3.常见Loader
五、插件理解
插件围绕钩子展开
