构建作用
构建工具就是将源代码转换成可执行的 JavaScript、CSS、HTML 代码，包括以下内容：
- 代码转换：将 TypeScript 编译成 JavaScript、将 SCSS 编译成 CSS 等；
- 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等；
- 代码分割：提取多个页面的公共代码，提取首屏不需要执行部分的代码，让其异步加载；
- 模块合并：在采用模块化的项目里会有很多个模块和文件，需要通过构建功能将模块分类合并成一个文件；
- 自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器；
- 代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过；
- 自动发布：更新代码后，自动构建出线上发布代码并传输给发布系统。
基本概念
-
Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
-
Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
-
Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
-
Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
-
Plugin：扩展插件，在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情。
-
module，chunk 和 bundle 其实就是同一份逻辑代码在不同转换场景下的取了三个名字：我们直接写出来的是 module，webpack 处理时是 chunk，最后生成浏览器可以直接运行的 bundle。
-
filename 指列在 entry 中，打包后输出的文件的名称；
-
chunkFilename 指未列在 entry 中，却又需要被打包出来的文件的名称。
-
webpackChunkName 是为预加载的文件取别名，
-
webpackPrefetch 会在浏览器闲置下载文件，
-
webpackPreload 会在父 chunk 加载时并行下载文件。
-
hash 计算与整个项目的构建相关；
-
chunkhash 计算与同一 chunk 内容相关；
-
contenthash 计算与文件内容本身相关。（注：chunkhash, contenthash不能同时和HMR使用）
-
source-map 大而全，啥都有，就因为啥都有可能会让 webpack 构建时间变长，看情况使用；
-
cheap-module-eval-source-map 这个一般是开发环境（dev）推荐使用，在构建速度报错提醒上做了比较好的均衡；
-
cheap-module-source-map 一般来说，生产环境是不配 source-map 的，如果想捕捉线上的代码报错，我们可以用这个。
流程概括
Webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：
- 初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；
- 开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译；
- 确定入口：根据配置中的 entry 找出所有的入口文件；
- 编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
- 完成模块编译：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；
- 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；
- 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。
在以上过程中，Webpack 会在特定的时间点广播特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。
流程细节
Webpack 的构建流程可以分为以下三大阶段：
- 初始化：启动构建，读取与合并配置参数，加载 Plugin，实例化 Compiler。
- 编译：从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译文件内容，再找到该 Module 依赖的 Module，递归地进行编译处理。
- 输出：对编译后的 Module 组合成 Chunk，把 Chunk 转换成文件，输出到文件系统。
关键的配置
- context：上下文。
- entry：入口文件，是所有依赖关系的入口，webpack 从这个入口开始静态解析，分析模块之间的依赖关系。
- output：打包输出的配置。
- devtools：SourceMap 选项，便于开发模式下调试。
- watch：监听模式，增量更新，开发必备！
- profile：优化。
- cache：webpack构建的过程中会生成很多临时的文件，打开 cache 可以让这些临时的文件缓存起来，从而更快的构建。
- module.loaders：如前文介绍，loaders 用来对文件做预处理。这样 webpack 就可以打包任何静态文件。
- resolve.alias：模块别名，这样可以更方便的引用模块。
- plugins：如前文介绍，webpack 的一些内置功能均是以插件的形式提供。
发表回复