webpack打包原理

Author： YH_evIs
发布时间：April 30, 2020
23209views
2 comments
7532字数
Categories： JavaScript 手册

## 什么是webpack
<div class="tip inlineBlock warning">这篇文章不会讲webpack的用法，仅仅是工作原理。</div>
阅读这篇文章前推荐预读我之前写的：
<div class="preview">
<div class="post-inser post box-shadow-wrap-normal">
<a href="https://yhevis.top/index.php/archives/22/" target="_blank" class="post_inser_a ">
<div class="inner-image bg" style="background-image: url(https://yhevis.top/usr/themes/handsome/assets/img/sj/2.jpg);background-size: cover;"></div>

<div class="inner-content" >
<p class="inser-title">Node中的js模块思想（module）</p>
<div class="inster-summary text-muted">
写在前头一般我们刚学习js的时候，我们会用外链的方式引入一个库，如：&lt;script type=&quot;t...
</div>
</div>
</a>

</div>

</div>
其中有提到入水口和出水口，而入出水口就是我们常说的依赖关系，如果是前端初学者，或许对此类设计模式并不熟悉，但一些业内的开发者估计就算家常便饭了，而webpack做的事情就是把这些所有的依赖打包成一份文件有利于部署到生产环境，以下是一些摘录：

> 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
webpack 就像一条生产线,要经过一系列处理流程后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的,多个流程之间有存在依赖关系,只有完成当前处理后才能交给下一个流程去处理。 插件就像是一个插入到生产线中的一个功能,在特定的时机对生产线上的资源做处理。
> webpack 通过 Tapable 来组织这条复杂的生产线。 webpack 在运行过程中会广播事件,插件只需要监听它所关心的事件,就能加入到这条生产线中,去改变生产线的运作。 webpack 的事件流机制保证了插件的有序性,使得整个系统扩展性很好。 -- 深入浅出 webpack 吴浩麟

它的大致工作原理就如同他的首页banner图一样：
<img src="https://image-static.segmentfault.com/421/819/4218193775-5caaf14b838a5" alt="webpack" />

## webpack核心概念
### Entry
入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。

进入入口起点后,webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

每个依赖项随即被处理,最后输出到称之为 bundles 的文件中。

### Output
output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。

基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中。

### Module
模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。

### Chunk
代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割。

### Loader
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。

loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。

本质上,webpack loader 将所有类型的文件,转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

### Plugin
loader 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。

插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。
## 从实践出发分析打包原理
让我们先定义三个文件：
```javascript
// index.js
import a from './test'

console.log(a)

// test.js
import b from './message'

const a = 'hello' + b

export default a

// message.js
const b = 'world'

export default b
```
就是定义了一个index.js依赖test.js；test.js内部依赖message.js。
接下来看一下打包后的代码：
```javascript
(function (modules) {
var installedModules = {};

function __webpack_require__(moduleId) {
if (installedModules[moduleId]) {
return installedModules[moduleId].exports;
}

var module = installedModules[moduleId] = {
i: moduleId,
l: false,
exports: {}
};

modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
// Flag the module as loaded
module.l = true;
// Return the exports of the module
return module.exports;
}

// expose the modules object (__webpack_modules__)
__webpack_require__.m = modules;
// expose the module cache
__webpack_require__.c = installedModules;
// define getter function for harmony exports
__webpack_require__.d = function (exports, name, getter) {
if (!__webpack_require__.o(exports, name)) {
Object.defineProperty(exports, name, {enumerable: true, get: getter});
}
};
// define __esModule on exports
__webpack_require__.r = function (exports) {
if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
Object.defineProperty(exports, Symbol.toStringTag, {value: 'Module'});
}
Object.defineProperty(exports, '__esModule', {value: true});
};
// create a fake namespace object
// mode & 1: value is a module id, require it
// mode & 2: merge all properties of value into the ns
// mode & 4: return value when already ns object
// mode & 8|1: behave like require
__webpack_require__.t = function (value, mode) {
/******/
if (mode & 1) value = __webpack_require__(value);
if (mode & 8) return value;
if ((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
var ns = Object.create(null);
__webpack_require__.r(ns);
Object.defineProperty(ns, 'default', {enumerable: true, value: value});
if (mode & 2 && typeof value != 'string') for (var key in value) __webpack_require__.d(ns, key, function (key) {
return value[key];
}.bind(null, key));
return ns;
};
// getDefaultExport function for compatibility with non-harmony modules
__webpack_require__.n = function (module) {
var getter = module && module.__esModule ?
function getDefault() {
return module['default'];
} :
function getModuleExports() {
return module;
};
__webpack_require__.d(getter, 'a', getter);
return getter;
};
// Object.prototype.hasOwnProperty.call
__webpack_require__.o = function (object, property) {
return Object.prototype.hasOwnProperty.call(object, property);
};
// __webpack_public_path__
__webpack_require__.p = "";
// Load entry module and return exports
return __webpack_require__(__webpack_require__.s = "./src/index.js");
})({
"./src/index.js": (function (module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _test__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./test */ \"./src/test.js\");\n\n\nconsole.log(_test__WEBPACK_IMPORTED_MODULE_0__[\"default\"])\n\n\n//# sourceURL=webpack:///./src/index.js?");

}),
"./src/message.js": (function (module, __webpack_exports__, __webpack_require__) {
// ...
}),
"./src/test.js": (function (module, __webpack_exports__, __webpack_require__) {
// ...
})
});
```
可以看到基本上都是以这种形式的：
```javascript
(function(modules) {
// ...
})({
// ...
})
```
还看不懂的话解释一下，一般这种写法的js都是立即执行的意思：
```javascript
(function(){}())
//or
(function(){})()
```
所以上面那一段代码实际上就是一个自执行函数，传入了一个modules对象，modules 对象是什么样的格式呢？打包后的代码里是这样子的：
```javascript
{
"./src/index.js": (function (module, __webpack_exports__, __webpack_require__) {
// ...
}),
"./src/message.js": (function (module, __webpack_exports__, __webpack_require__) {
// ...
}),
"./src/test.js": (function (module, __webpack_exports__, __webpack_require__) {
// ...
})
}
```
是这样的一个 路径 -> 函数 这样的 key,value 键值对。而函数内部是我们定义的文件转移成 ES5 之后的代码：
```javascript
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _test__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./test */ \"./src/test.js\");\n\n\nconsole.log(_test__WEBPACK_IMPORTED_MODULE_0__[\"default\"])\n\n\n//# sourceURL=webpack:///./src/index.js?");
```
到这里基本上结构是分析完了，接着我们看看他的执行，自执行函数一开始执行的代码是：
```javascript
__webpack_require__(__webpack_require__.s = "./src/index.js");
```
调用了__webpack_require_函数，并传入了一个moduleId参数是"./src/index.js"。再看看函数内部的主要实现：
```javascript
// 定义 module 格式   
var module = installedModules[moduleId] = {
i: moduleId, // moduleId
l: false, // 是否已经缓存
exports: {} // 导出对象，提供挂载
};

modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
```
这里调用了我们modules中的函数，并传入了 __webpack_require__函数作为函数内部的调用。module.exports参数作为函数内部的导出。因为index.js里面引用了test.js，所以又会通过 __webpack_require__来执行对test.js的加载：
```javascript
var _test__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/test.js");
```
test.js内又使用了message.js所以，test.js内部又会执行对message.js的加载。message.js执行完成之后，因为没有依赖项，所以直接返回了结果：
```javascript
var b = 'world'
__webpack_exports__["default"] = (b)
```
执行完成之后，再一级一级返回到根文件index.js。最终完成整个文件依赖的处理。
整个过程中，我们像是通过一个依赖关系树的形式，不断地向数的内部进入，等返回结果，又开始回溯到根。

## 写在最后
我寻思这我当年在校学jquery那会儿怎么也不会想到如今前端也需要编译打包了，这真的是个超乎想象的领域。
<span class="external-link"><a href="https://github.com/webfansplz/article/tree/master/easy-webpack" target="_blank">网上找的一个实现webpack的项目<i data-feather='external-link'></i></a></span>

###参考资料
<span class="external-link"><a href="https://segmentfault.com/a/1190000021494964?utm_source=tag-newest" target="_blank">webpack打包原理 ? 看完这篇你就懂了 !<i data-feather='external-link'></i></a></span>

Last modification：April 30th, 2020 at 11:32 am

如果觉得我的文章对你有用，请随意赞赏

2 comments

两仪橙
April 30th, 2020 at 12:28 pm

就处理依赖这一块儿来讲，webpack确实得天独厚

Reply
1. YH_evIs
  April 30th, 2020 at 03:29 pm
  
  @两仪橙
  是的
  
  Reply

比利海灵顿
<script>console.log('test...
比利海灵顿
it's good for you
两仪橙
铁疙瘩山雨欲来风满楼小乔诸葛存心忧二零一二再回首惟愿悬壶任漂泊...
CodeSkyStar
名称：CodeSkyStar网址：https://www.co...
CodeSkyStar
自我学习，自我成长ing

webpack打包原理

YH_evIs • 2020 年 04 月 30 日

它的大致工作原理就如同他的首页banner图一样：
<img src="https://image-static.segmentfault.com/421/819/4218193775-5caaf14b838a5" alt="webpack" />

## webpack核心概念
### Entry
入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。

进入入口起点后,webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

每个依赖项随即被处理,最后输出到称之为 bundles 的文件中。

### Output
output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。

基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中。

### Module
模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。

### Chunk
代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割。

### Loader
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。

loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。

本质上,webpack loader 将所有类型的文件,转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

### Plugin
loader 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。

console.log(a)

// test.js
import b from './message'

const a = 'hello' + b

export default a

// message.js
const b = 'world'

function __webpack_require__(moduleId) {
if (installedModules[moduleId]) {
return installedModules[moduleId].exports;
}

var module = installedModules[moduleId] = {
i: moduleId,
l: false,
exports: {}
};

modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
// Flag the module as loaded
module.l = true;
// Return the exports of the module
return module.exports;
}

webpack打包原理

Leave a Comment Cancel reply

2 comments

Hello world

【学习笔录】每周一道算法题：斐波那契数列

我的第一篇博客文章

【学习笔录】每周一道算法题：括号生成

【学习笔录】每周一道算法题：串联字串

【电子书】深入理解计算机系统（第二版）

【学习笔录】每周一道算法题：括号生成

用 CSS3 实现抖音的故障艺术

五种开源协议

【电子书】安迪沃霍尔的哲学

webpack打包原理