工程化之webpack打包过程

今天，我们选择了一个在前端范围内，占很大比重的构建工具–Webpack。

近一年的npm下载量

github对应的stars

可以看到，无论是从npm 下载量和github的star的数量,Webpack都遥遥领先于其他工具(grunt/gulp/rollup/swc)

Webpack 是一个非常强大的构建工具，它可以被认为是当今许多技术中的一个基本组件，前端开发人员使用它来构建他们的应用程序。

好了，话不多说，继续赶路。

你能所学到的知识点

1.Webpack常见概念(entry/output/loader)
2.从entry对象{a:'./a.js'}如何构建一个模块树>

`entry`=>`EntryPlugin`=>`EntryDependency`=>`NormalModuleFactory`=>模块树 

3.ModuleGraph 如何跟踪已建模块直接的关系
4.ModuleGraph是如何被构建的
5.Module/Chunk/ ChunkGroup /EntryPoint具体是啥并它们直接的关系
6.ChunkGraph是如何被构建的

---

文章概要

0.Webpack基本概念简讲
1.打包流程总览
2.entry对象
3.深入理解 ModuleGraph
4.构建ModuleGraph
5.Module/Chunk/ ChunkGroup /EntryPoint 是个啥
6.提交chunk资源

---

0. Webpack基本概念简讲

本质上，webpack 是一个现代 JavaScript 应用程序的静态{模块打包器| module bundler}> 当 webpack 处理应用程序时，它会递归地构建一个{依赖关系图| dependency graph}，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

运行方式

在项目中有两种运行 Webpack 的方式：

1.基于命令行的方式webpack --config webpack.config.js 2. 基于代码的方式

var webpack = require('webpack') 
var config = require('./webpack.config')
webpack(config, (err, stats) => {}) 

---

重要概念

针对Webpack有几个重要的概念需要知晓。

关键字	作用
Entry	Webpack 的入口文件指的是应该从哪个模块作为入口，来构建内部依赖图
Output	告诉 Webpack 在哪输出它所创建的 bundle 文件以及输出的 bundle 文件该如何_命名_、_输出到哪个路径下_等规则
Loader	模块代码转化器使得 Webpack 有能力去处理除了 JS、JSON 以外的其他类型的文件
Plugin	Plugin 提供执行更广的任务的功能包括：打包优化，资源管理，_注入环境变量_等
Mode	根据不同运行环境执行不同优化参数时的必要参数
Browser Compatibility	支持所有 ES5 标准的浏览器（IE8 以上）

---

1. 打包流程总览

在此篇文章中，我们只针对NormalModules进行讲解。当然，还有其他类型的模块 如 ExternalModule 和 ConcatenatedModule（当使用require.context()时）这些都不在我们讨论范围内。

先来一个总体流程，润润嗓子。(莫慌，关键的点，后面都会做解释)

---

2. entry对象

一切都从entry对象开始

我们用一个简单例子来说明它的作用，在这个例子中，entry对象只是一个键值对的集合。

// webpack.config.js
entry: {
	a: './a.js',
	b: './b.js',
	/* ... */
} 

webpack 中的模块与文件是一一对应的。

因此，在上面的代码中，a.js会产生一个新的模块，而b.js也会产生。

模块是文件的升级版。> 模块，一旦创建和构建，除了源代码，还包含很多有意义的信息，如：

• 使用的加载器
• 它的依赖关系
• 它的出口（如果有的话）
• 它的哈希值

同时entry对象中的每一项都可以被认为是模块树中的根模块。模块树是因为根模块可能需要一些其他的模块，这些模块可能需要其他的模块，等等。所有这些模块树都被储存在 ModuleGraph中。

我们需要提到的下一件事是，webpack是建立在很多插件之上的。人们有很多方法可以加入_自定义逻辑_。webpack的可扩展性是通过hook实现的。例如，你可以在 ModuleGraph 建立后，当一个新的{资源|asset }被生成时，在模