这是我参与「第四届青训营 」笔记创作活动的第12天
一、重点内容
- 了解Webpack的概念
- 学习如何使用Webpack
二、详细知识点
为什么要学习Webpack？
- 理解前端“工程化”概念、工具、目标
- 可以成为个人的核心竞争力
- 高阶前端必经之路
什么是Webpack
- 本质上是一种前端资源编译、打包工具
- 多份资源文件打包成一个Bundle
- 支持Babel、Eslint、TS、CoffeScript、Less、Sass
- 支持模块化处理CSS、图片等资源文件
- 支持HMR+开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持Tree-shaking
- 支持Sourcemap
- ......
使用Webpack
核心流程之极度简化版
- 入口处理
从‘entry’文件开始，启动编译流程 - 依赖解析
从‘entry’文件开始，根据‘require’or‘import’等语句找到依赖资源 - 资源解析
根据‘module’配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容 - 资源合并打包
将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
*递归调用2、3，直到所有资源处理完毕*
模块化+一致性
- 多个文件资源合并成一个，减少HTTP请求数
- 支持模块化开发
- 支持高级JS特性
- 支持Typescript、CoffeeScript方言
- 统一图片、css、字体等其他资源的处理模型
- ......
使用Webpack
对于Webpack的使用方法，基本围绕着“配置”展开，大致分为两类：
- 流程类：作用于流程中某个or若干个环节，直接影响打包效果的配置项
- 工具类：主流程之外，提供更多工程化能力的配置项
流程类配置
- 输入：‘entry’,‘context’
- 模块解析：‘resolve’、‘externals’
- 模块转译：‘module’
- 后处理：‘optimization’、‘mode’、‘target’
