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

【Webpack】学习笔记