详细解析Webpack是怎么运行的

Webpack 运行与打包过程

Webpack，这款前端资源的打包神器，是如何运行并处理我们的代码的呢？今天，我们就来深入一下 Webpack 的运行和打包过程。

我们先了解一下 Webpack 的主要工作流程。Webpack 通过读取配置文件（如 webpack.config.js），根据配置中的入口（entry）开始，将入口文件和其他依赖文件一起打包成一个或多个 bundle。这个过程包括了加载资源、转换资源、生成最终的 bundle 等步骤。

现在让我们以一个简单的项目为例，看看这个过程是如何进行的。假设我们有一个简单的 JavaScript 文件（index.js），并有一个对应的 webpack 配置文件。Webpack 首先会读取这个配置文件，根据配置的入口找到 index.js 文件，然后开始这个文件。在这个过程中，Webpack 会识别并处理所有的依赖关系，例如 import 或 require 的语句。

在处理这些依赖的过程中，Webpack 会使用各种加载器（Loader）来处理不同类型的文件。例如，对于 JavaScript 文件，我们可以使用 Babel Loader 来将现代 JavaScript 代码转换为所有浏览器都能理解的代码。加载器的作用就是处理并转换这些文件，使得它们可以被浏览器正确执行。

除了加载器，Webpack 还有插件（Plugin）系统。插件可以在整个构建过程中执行各种各样的任务，例如压缩代码、生成 HTML 文件等。在我们的例子中，我们有一个名为 MyPlugin 的插件，它会处理输出的代码，去除其中的注释。这个插件在 webpack 构建过程的最后阶段被调用，对输出的代码进行美化处理。

当所有的文件都被处理和转换后，Webpack 会生成一个或多个 bundle 文件。这些文件包含了所有需要加载的 JavaScript 代码和资源，可以直接在浏览器中运行。这就是整个 Webpack 的运行和打包过程。

Webpack 通过读取配置文件、入口文件、处理依赖关系、使用加载器转换文件、使用插件处理输出文件等步骤，完成了从源代码到可在浏览器中运行的代码的转化过程。这个过程不仅提高了开发效率，也使得代码的管理和部署变得更加方便和高效。在深入研究Webpack打包的源代码之前，我们先来丰富一下我们的原始代码。

新文件：src/utils/math.js

```javascript

export const plus = (a, b) => {

return a + b;

};

```

我们在src/index.js中引用了上述的math.js模块。Webpack通过使用其特有的方式支持ES6模块规范，让我们能够实现模块化开发。

当我们运行Webpack命令并通过webpack.config.js配置文件处理源代码后，输出的文件大致如下：

```javascript

(function(modules){

// ...其他代码

})({

"./src/index.js": function() {

// ..dex.js的代码被转化后的样子

},

"./src/utils/math.js": function() {

// ...math.js的代码被转化后的样子

}

});

```

这里，通过IIFE（立即调用函数表达式）传入的modules对象，包含了对应我们源代码中所有的模块，包括新添加的src/utils/math.js模块。这是一个重要的步骤，它使得我们的各个模块能够在Webpack的打包文件中按序运行。

接下来，我们深入一下webpackBootstrap函数内部的内容。

```javascript

// webpackBootstrap

(function(modules){

var installedModules = {}; // 缓存已经加载过的模块，避免重复加载

// 这是Webpack定义的模块加载函数，用来加载webpack定义的模块

function __webpack_require__(moduleId) {

// ...加载模块的具体实现

}

// 在__webpack_require__函数上挂载一些必要的变量和函数...

// 通过__webpack_require__函数加载入口模块 "./src/index.js"

return __webpack_require__(__webpack_require__.s = "./src/index.js");

})(/modules/); // 这里应该是模块列表，用来提供给webpackBootstrap使用

```

从上述代码可以看出，webpackBootstrap主要做了两件事：

1. 定义一个模块加载函数`__webpack_require__`。这个函数是用来加载Webpack定义的模块的。当我们需要用到某个模块时，就会通过这个函数来加载。

2. 使用加载函数`__webpack_require__`来加载入口模块"./src/index.js"。这是Webpack启动的第一步，通过加载入口模块来开始整个应用的运行。

那么，其他模块是如何被加载的呢？其实，这一切都是依赖于`__webpack_require__`函数来实现的。当我们需要通过一个模块来使用另一个模块的功能时，就会通过`__webpack_require__`来加载那个模块。Webpack在打包的时候，会处理好所有的依赖关系，使得在运行时能够正确地加载各个模块。当我们深入 `__webpack_require__` 函数时，会发现其内部逻辑精妙且复杂。这个函数是 Webpack 用来加载模块的，它确保了模块的加载、执行和缓存机制的有序进行。

当我们尝试加载一个模块时，Webpack 会检查这个模块是否已经被加载过。如果 `installedModules` 缓存中已经存在这个模块，那么就直接返回模块的导出内容，避免了重复加载。这种机制极大地提高了模块加载的效率。

对于第一次加载的模块，Webpack 会进行初始化操作。每个模块对象都包含模块ID、加载标识和导出对象。然后，模块的执行函数会被调用，这个函数包含了模块的所有逻辑。在执行模块函数时，会传入一些参数，如模块导出对象引用、当前模块对象引用以及 `__webpack_require__` 函数本身，这样模块可以导出内容，也可以加载其他模块的导出。

具体到 `./src/index.js` 这个入口模块，它的执行函数首先通过 `__webpack_require__` 加载了 `./src/utils/math.js` 模块，然后通过这个模块提供的方法进行了计算并打印结果。这个过程体现了 Webpack 如何处理模块的导入和导出。

在模块执行过程中，Webpack 还处理了许多其他细节，如兼容不同的模块规范、处理动态导入等。这些功能都使得 Webpack 成为了一个强大的模块打包工具。

`__webpack_require__` 函数是 Webpack 模块化机制的核心。它确保了模块的加载、缓存和执行的正确性，使得前端代码的模块化开发成为可能。通过对这个函数的，我们可以更深入地理解 Webpack 的工作原理。Webpack：模块的执行与异步加载之旅

Webpack，这个现代JavaScript应用程序的模块打包工具，以其强大的功能和灵活的配置赢得了开发者的喜爱。让我们深入理解Webpack模块的执行过程以及如何进行异步加载。

当我们引入一个模块时，Webpack会按照特定的顺序执行模块。这个过程从入口模块开始，通过`__webpack_require__`获取工具模块的exports对象。这个过程中涉及到一个重要的函数`__webpack_require__.d`，它是用来定义exports对象导出的属性的。

`__webpack_require__.d`函数是对`Object.defineProperty`的简单包装。它的作用是检查exports（不含原型链上）是否已有某个属性，如果没有，就定义该属性的getter。这样一来，我们就可以通过`module.exports`导出我们的函数或变量，并在其他模块中通过`__webpack_require__`引入使用。

当我们的应用程序变得越来越大时，将所有的代码打包进一个文件会导致网页加载时间过长。为了解决这个问题，我们可以采用异步加载的方式，按需加载其他文件并使用其中的模块。Webpack推荐使用ES的`import()`规范来异步加载模块。通过这种方式，我们可以按需加载工具模块，降低初始加载的代码体积。

举个例子，我们可以在入口模块中使用`import()`来异步加载工具模块。这样，Webpack会将这个模块从主bundle中拆分出来，生成一个或多个新的chunk。这些新的chunk会在需要的时候被浏览器加载，从而提高应用的性能和用户体验。

在Webpack的配置中，我们还需要指定资源文件的公共资源路径（publicPath）。这样，浏览器在加载异步加载的chunk时，就能知道去哪里找这些文件。

Webpack通过其强大的模块处理和代码拆分功能，帮助我们优化应用程序的性能和用户体验。通过深入理解Webpack模块的执行过程和异步加载机制，我们可以更好地利用这些功能，构建出更高效、更灵活的前端应用程序。相对于 demo1，主块（main chunk）里添加了异步加载的代码，下面让我们深入了解一下其中的细节。

webpackBootstrap 是一个用于初始化 Webpack 应用程序的函数，它接受一个模块对象作为参数。在这个函数中，我们可以看到一些新的代码片段，这些代码主要关注于异步加载和模块缓存。这是 Webpack 构建现代前端应用时非常重要的部分。

在 webpackBootstrap 的回调函数中，我们有一个特殊的函数 `webpackJsonpCallback`，它是用于处理其他块加载完成后的回调。我们有一个 `installedChunks` 对象用于跟踪各个块的加载状态。这是 Webpack 实现代码分割和异步加载的关键部分。

接下来是 `__webpack_require__` 函数，这是一个同步的 require 函数，用于同步加载模块。但在主块中，我们也看到了一个异步版本的 `require` 函数 `__webpack_require__.e`，这个函数用于异步加载特定的模块。这是 Webpack 支持动态导入和代码分割的核心部分。通过这种方式，我们可以按需加载 JavaScript 代码，提高应用的性能和用户体验。

在主模块的代码中，我们可以看到使用了这个异步加载功能。当页面加载完成后，会等待两秒（通过 setTimeout 函数实现），然后异步加载 "./src/utils/math.js" 模块。加载完成后，通过调用 `mathUtil.plus(1, 2)` 来使用模块中的函数进行计算，并将结果打印到控制台。这个过程是异步的，意味着页面不会阻塞等待这个模块加载完成。这是现代前端开发中常见的做法，可以提高应用的响应速度和用户体验。

主块中的这些改动使 Webpack 能够更好地支持异步加载和代码分割，这对于构建大型、复杂的现代前端应用非常重要。这些改动使得 Webpack 能够更灵活地管理代码和资源，提高应用的性能和用户体验。在包裹函数的执行顺序时，我们的视线首先聚焦于“JSONP初始化”这一关键阶段。这是一个不可或缺的部分，为接下来的模块加载做好了充分准备。

一、JSONP的初始化

在网页开发中，JSONP是一种常用的跨域请求技术。在这里，它被Webpack巧妙地运用，以实现异步加载和模块化。

我们看到一个名为“jsonpArray”的数组被创建并存储在window对象中，其名称为"webpackJsonp"。如果这个数组已经存在，那么我们会使用现有的数组，否则将其初始化为一个空数组。

完成这些操作后，我们将jsonpArray重置为一个普通的数组，并将push方法恢复为原来的Array.prototype.push。由于jsonpArray仍然是一个空数组，所以上述操作实际上并没有执行任何实质性的操作。

紧接着，我们对数组中的每个元素调用webpackJsonpCallback函数。这是为了确保已经加载的所有chunk都能被正确处理。我们将原来的push方法恢复给数组，以便后续的正常使用。

二、webpack的模块化加载

初始化结束后，我们进入__webpack_require__入口模块。这是一个特殊的函数，用于加载和管理Webpack的模块。在这个过程中，“import('../utils/math.js')”语句被转化为了__webpack_require__.e(0).then(__webpack_require__.bind(null, "./src/utils/math.js"))。

这种转化是Webpack将“同步加载模块”的逻辑拆分为“先加载chunk，完成后再加载模块”的异步加载方式的结果。这里的0代表./src/utils/math.js所在chunk的id。通过这种方式，Webpack能够更灵活地管理模块和资源的加载，提高页面的加载性能和响应速度。

JSONP的初始化和模块化加载是Webpack内部机制的重要组成部分。通过这些步骤，Webpack能够高效地管理模块和资源，使前端项目更加模块化、可维护和可扩展。Webpack的神奇世界：深入了解__webpack_require__.e的定义

在Webpack的世界中，有一个重要的函数叫做__webpack_require__.e，它是用于异步加载模块的。接下来，让我们一起走进这个函数的世界，看看它是如何工作的。

__webpack_require__.e是一个名为requireEnsure的函数，它接受一个参数chunkId。这个chunkId代表了需要加载的模块块。

函数一开始，创建了一个空的承诺数组promises。这个数组将存储所有正在加载或即将加载的模块的承诺。

接下来，函数检查给定的chunkId是否已经在加载或已加载。这通过查看installedChunks数组来完成，这个数组在webpackBootstrap中维护，用于存储已经加载或正在加载的模块块。

如果给定的chunkId尚未加载，函数将进行一系列操作来加载它。创建一个新的promise，并将其添加到promises数组中。然后，创建一个新的script标签，将其src属性设置为根据publicPath和chunkId生成的URL，以此来加载模块块。

脚本加载完成后，会调用一个叫做onScriptComplete的函数。这个函数处理各种情况，包括脚本加载完成、加载超时和加载失败。如果模块块加载失败，它会生成一个错误对象，并调用chunk的第二个元素（即拒绝函数）来拒绝promise。如果模块块加载成功，它将继续进行后续的处理。

为了处理浏览器中的异步加载，脚本加载过程中还设置了一个12秒的超时时间。如果在这个时间内脚本没有加载完成，将触发超时事件，同样会调用onScriptComplete函数并标记为超时。

函数返回所有promises的聚合promise，这意味着它将等待所有模块块加载完成，然后这些promise。这就是Webpack的异步加载机制的核心。通过这种方式，Webpack可以动态地加载模块块，从而提高应用程序的性能和响应速度。

当程序开始运行时，它会首先从缓存中读取已安装的 chunk 数据（installedChunkData）。在某些情况下，这些数据在加载时可能是未定义的（undefined）。这种情况会触发一系列的条件判断。当进入特定的代码块时，程序将开始加载 chunk 脚本。这个过程包括创建一个 script 标签，向指定的地址发起请求并执行获取到的 chunk 内容。一个 promise 被初始化，用于控制整个 chunk 文件的加载过程。

值得注意的是，在加载过程中，我们只在特定的代码块中找到了 reject 的使用场景，即在 chunk 加载出现错误时。resolve 的使用地点却并未在此处发现，而是被挂在了缓存上（installedChunks[chunkId] = [resolve, reject]）。这引发了我们的好奇心：当 chunk 文件成功加载后会发生什么呢？

接下来，让我们深入了解这个 webpackJsonpCallback 函数。它接收一个数据对象作为参数，这个对象包含了两个关键信息：chunkIds 和 moreModules。函数的主要任务是将所有的 chunkIds 标记为已加载，并将 moreModules 添加到 webpackBootstrap 中的 modules 闭包变量中。在这个过程中，还会执行一些其他的操作，比如调用父级的 jsonp 函数（parentJsonpFunction）将数据传输到全局数组中进行缓存。当所有的 resolve 被执行后，chunk 的加载过程就完成了。这意味着相关的 promise 状态已经变为 resolved，然后存储在 then 函数中的代码开始执行。

Webpack的异步加载机制

当异步加载的chunk内容被成功获取后，我们需要完成两项关键任务：一是允许依赖此次异步加载结果的模块继续执行，二是缓存加载结果。让我们一起深入这一过程。

我们聚焦于让模块继续执行。回忆一下之前的__webpack_require__.e，当chunk处于“加载中”状态时，对应的installedChunks[chunkId]的值是一个包含resolve、reject和promise的数组。一旦chunk加载完成，但promise尚未决议时，webpackJsonpCallback内部将通过收集installedChunks上的resolve并执行它来推进流程。

接下来，我们来谈谈缓存机制，这涉及到多个层面。首先是chunk层面。有两个关键操作：一是将installedChunks[chunkId]置为0，这样当再次加载同一chunk时，__webpack_require__.e会返回一个立即决议的promise（Promise.all([])）；二是将chunk data添加到window["webpackJsonp"]数组中，以便在多入口模式下轻松获取已加载的chunk缓存。这一过程通过以下代码实现：

接下来是缓存执行部分。我们将window["webpackJsonp"]数组中的每个元素通过webpackJsonpCallback进行处理。我们通过保存window["webpackJsonp"]数组的原生push函数（即parentJsonpFunction），确保新加入的chunk数据能够被正确处理。

在module层面，chunk中的moreModules会被合并到入口文件的modules中，供下一个微任务中的__webpack_require__同步加载模块。

举个例子，当我们在"./src/index.js"中通过__webpack_require__.e(0)加载一个异步chunk时，一旦promise决议，我们就可以通过__webpack_require__.bind(null, "./src/utils/math.js")加载chunk中的模块。接下来，就是Webpack Loader翻译的其它业务代码了。

获取chunk内容；然后，让依赖的模块继续执行并缓存加载结果；接着，将chunk中的moreModules合并到入口文件的modules中；通过__webpack_require__同步加载模块，并执行其他业务代码。

想要了解更多关于Webpack的基础知识，可以访问狼蚁网站的SEO优化相关文章。

调用cambrian.render('body')来完成页面的渲染。让我们共同Webpack的奥秘，优化前端性能！