「Webpack 知识体系 | 青训营笔记]

这是我参与「第五届青训营 」笔记创作活动的第12天

什么是Webpack

一个前端项目由PNG、JPG、JS、TS、css、Less、Vue等多种资源构成。

出现了Gulp、rollup、webpack、Vite等工具，有了“前端工程”这一概念。
Webpack是一种前端资源的编译、打包工具。

• 多份资源文件打包成一个Bundle
• 支持Babel、Eslint、TS、CoffeScript、Less、Sass
• 支持模块化处理css、图片等资源文件
• 支持HMR+开发服务器
• 支持持续监听、持续构建
• 支持代码分离
• 支持Tree-shaking
• 支持Sourcemap

使用Webpack

entry：项目入口
output：项目打包完结果放的地方

模块化+一致性

• 多个文件资源合并成一个，减少 http 请求数
• 支持模块化开发
• 支持高级 JS 特性
• 支持 Typescript、CoffeeScript 方言
• 统一图片、CSS、字体 等其它资源的处理模型
• Etc..

使用Webpack

写配置文件

• 流程类：作用于流程中某个or若干个环节，直接影响打包效果的配置项
  

1. entry，output必需
   
2. 处理CSS
   
   test：过滤条件
   use：定义处理文件的loader数组
3. 接入Babel
   
   把高版本JS代码转译成低版本的
4. 生成HTML
   

• 工具类：主流程之外，提供更多工程化能力的配置项

1. HMT
   模块热替换：写的代码不用重新编译，页面就能更新
   
   devServer：hot true+watch：true持续更新
2. Tree-Shaking
   删除没用到的代码Dead Code
   代码没用到，不可到达；代码执行的结果不会被用到；代码只读不写
   
3. 其他工具
   缓存 SourceMap 性能监控 日志 代码压缩 分包

理解Loader

Webpack 本身只能处理 js 和 JSON 文件，其他类型文件它是不能够处理的。需要借助 Loader 来处理这些类型的文件，并将它们转换为有效的模块。

链式调用：less，css，style。从后往前

特点

链式执行，支持异步执行，分normal、pitch两种模式

pitch阶段任意一个loader有返回值，会阻止之后的执行。

插件

• 插件架构有什么用？
  对扩展开放，对修改封闭。