这是我参与「第四届青训营」笔记创作活动的第 5 天
一、为什么要学习Webpack
- 理解前端“工程化”概念，工具，目标
- 提升自己的核心竞争力，一个团队总要有人熟悉Webpack
- 高阶前端必经之路
二、什么是Webpack？
Webpack本质上是一种资源编译，打包工具，用来解决代码中的资源文件过多手动维护困难等问题。
三、起步
- 安装
- 编写配置文件
- 执行编译命令
四、核心流程（极度简化版）
graph TD
1.GetStart --> 2.DependenciesLookup --> 3.Transform --> 4.CombineAssets
- 入口处理：从‘entry’文件开始，启动编译流程
- 依赖解析：从‘entry’文件开始，根据require或import等语句找到依赖资源
- 资源解析：根据‘moudle’配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容
- 资源合并打包：将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
注意:过程中会递归调用2、3步骤，直到所有资源处理完毕
五、模块化+一致性
六、使用Webpack
1.基本使用
关于 Webpack 的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类:
- 流程类:作用于流程中某个or若干个环节，直接影响打包效果的配置项
- 工具类:主流程之外，提供更多工程化能力的配置项
流程类配置
- 输入(GetStart): 'entry', 'context'
- 模块解析(DependenciesLookup)：'resolve', 'externals'
- 模块转译(Transform)：'module'
- 后处理(CombineAssets)：'optimization', 'mode', 'target'
流程类配置
- 开发效率类：'watch', 'devtool', 'devServer'
- 性能优化类: 'cache', 'performance'
- 日志类：'stats', 'infrastructureLogging'
配置总览
按使用频率：
- entry/output
- module/plugins
- mode
- watch/devServer/devtool
2.使用Webpack处理CSS
文件结构
内容
1.安装Loader
2.添加 'module' 配置处理css文件
参考：style-loader、css-loader、Webpack 原理系列七：如何编写loader
3.使用Webpack接入Babel
文件结构
内容
1.安装依赖
2.声明产物出口 'output'
3.执行 'npx webpack'控制台输出日志
参考：@babel/preset-env、babel-loader、babel官网
4.使用Webpack生成HTML
文件结构
1.安装依赖
2.声明产物出口'output',配置 'plugins'
3.执行'npx webpack' 文件建构变化——生成了index.html
index.html文件内容
5.使用Webpack之HMR(Hot Module Replacement)
1.开启HMR
2.启动Webpack
5.使用Webpack之Tree-Shaking
Trer-Shaking ——树摇，用于删除 Dead Code。
Dead Code ——代码没有被用到，不可到达；代码的执行结果不会被用到；代码只读不写。
示例
开启 tree-shaking：
- 'mode': 'production'
- 'optimization.usedExports': 'true'
注意:对工具类库如Lodash有奇效
6.Webpack的其他工具
缓存，Soucemap，性能监控，日志，代码压缩，分包...
详情见Webpack官网
七、理解Loader
问题:Webpack只认识JS。
为了处理非标准的JS资源，设计出资源翻译模块——Loader， 用于将资源翻译为标准JS。
使用loader的步骤：
1.安装Loader
2.添加 'module'配置
Loader的链式调用：
- less-loader:实现less => css的转换
- css-loader:将CSS包装成类似module.exports = "${css}”的内容，包装后的内容符合JavaScript语法
- style-loader:将css模块包进require语句,并在运行时调用injectStyle 等函数将内容注入到页面的style标签
其他特性：
特点：
- 链式执行
- 支持异步执行
- 分normal、pitch两种模式
如何编写Loader
示例 eslint-loader
默认暴露一个函数入参为source，sourceMap（可选），data（可选）返回值为处理后的source，以便于链式调用。
常用Loader
八、理解Plugins
很多知名工具，如: vs Code、Web Storm、Chrome、FirefoxBabel、Webpack、Rollup、Eslint Vue、Redux、Quill、Axios 等等．都设计了所谓"插件"架构,为什么?
插件又是什么？为什么这么设计？ 下图为Webpack执行流程图
这是一个特别复杂的过程,那么就会导致:
- 新人需要了解整个流程细节，上手成本高功能迭代成本高，牵一发动全身
- 功能僵化，作为开源项目而言缺乏成长性Blabla
- 心智成本高=>可维护性低=>生命力弱
而插件架构精随:对扩展开放,对修改封闭。 甚至，Webpack 本身的很多功能也是 基于插件实现的
使用插件的步骤
1.下载插件
2.创建插件实例
如何实现一个插件
参考:Webpack 插件架构深度讲解、 一文吃透 Webpack 核心原理
学习方法总结：
1. 入门应用：
- 理解打包流程
- 熟练掌握常用配置项、Loader、插件的使用方法，能够灵活搭建集成Vue、React、Babel、Eslint、Less、Sass、图片处理等工具的 Webpack环境
- 掌握常见脚手架工具的用法，例如:Vue-cli、create-react-app、@angular/cli
2. 进阶：
- 理解Loader、Plugin机制，能够自行开发Webpack组件
- 理解常见性能优化手段，并能用于解决实际问题理解前端工程化概念与生态现状
3. 大师级：
- 阅读源码，理解Webpack编译、打包原理，甚至能够参与共建
适合新手的体系图：
参考：Webpack体系图
