Webpack如何高效掌握632个关键构建流程技巧？

本文共计3809个文字，预计阅读时间需要16分钟。

Webpack 是一款前端极快的打包工具，本质上是一个现代 JavaScript 应用程序的静态模块打包器（module+bundler）。处理应用程序时，它会递归地构建一个依赖关系图（dependency graph），图中包含了应用程序需要的每个模块。

Webpack 是前端很火的打包工具，它本质上是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 Webpack 处理应用程序时，它会递归地构建一个依赖关系图(​​dependency graph​​​)，其中包含应用程序需要的每个模块，然后将所有模块打包成一个或多个​​bundle​​。

其实就是：Webpack 是一个 JS 代码打包器。

至于图片、CSS、Less、TS等其他文件，就需要 Webpack 配合 loader 或者 plugin 功能来实现~

了不起的 Webpack 构建流程学习指南.png

一、Webpack 构建流程分析

1. Webpack 构建过程

首先先简单了解下 Webpack 构建过程：

根据配置，识别入口文件；

逐层识别模块依赖（包括 Commonjs、AMD、或 ES6 的 import 等，都会被识别和分析）；

Webpack 主要工作内容就是分析代码，转换代码，编译代码，最后输出代码；

输出最后打包后的代码。