这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天
一、什么是Webpack
webpack 是代码编译工具，有入口、出口、loader 和插件。
webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。
当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。
本质上是一种前端资源编译、打包工具
- 多份资源文件打包成一个Bundle
- 支持Babel、Eslint、TS等
- 支持模块化处理css、图片等资源
- 支持HMR+开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持Tree-shaking
- 支持Sourcemap
二、使用Webpack
- 安装
- 编辑配置文件
- 执行编译命令
- 效果（把多个资源合并成一个资源）
三、核心流程
- 入口处理：从entry文件开始，启动编译流程
- 依赖解析： 从entry文件开始，根据requireorimport 等语句找到依赖资源
- 资源解析：根据module配置，调用资源转移器，将png、css 等非标准JS资源转译为JS内容
- 资源合并打包：将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
webpack在本质上就做了两件事情：1. 模块化 2. 一致性
- 支持对不同类型的资源都用 requireorimport 等语句 进行管理
- 支持模块化开发
- 支持高级JS特性
- 支持 Typescript、CoffeeScript等超集语言
- 支持多个文件资源合并打包成一个，减少http请求数 ......
四、怎么使用Webpack
关于Webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类：
- 流程类：作用于前面提到的核心流程中某个or 若干个环节，直接影响打包效果的配置项
- 工具类：主流程之外，提供更多工程化能力的配置项
五、流程类配置
- 与输入有关的：
- entry：定义这个项目的入口
- context：决定webpack在运行的时候从哪个文件夹去找资源
- 与模块解析有关的：resolve 和 externals
- 与模块转译有关的：module
- 与后处理有关的：optimization 、 mode 和 target
。。。。。。
