webpack打包原理

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

什么是webpack

这篇文章不会讲webpack的用法，仅仅是工作原理。

阅读这篇文章前推荐预读我之前写的：

Node中的js模块思想（module）

写在前头一般我们刚学习js的时候，我们会用外链的方式引入一个库，如：<script type="t...

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

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

它的大致工作原理就如同他的首页banner图一样：
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 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。

插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。

从实践出发分析打包原理

让我们先定义三个文件：

// 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。
接下来看一下打包后的代码：

(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__) {
    // ...
  })
});

可以看到基本上都是以这种形式的：

(function(modules) {
  // ...
})({
 // ...
})

还看不懂的话解释一下，一般这种写法的js都是立即执行的意思：

(function(){}())
//or
(function(){})()

所以上面那一段代码实际上就是一个自执行函数，传入了一个modules对象，modules 对象是什么样的格式呢？打包后的代码里是这样子的：

{
  "./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 之后的代码：

"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?");

到这里基本上结构是分析完了，接着我们看看他的执行，自执行函数一开始执行的代码是：

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

调用了__webpack_require_函数，并传入了一个moduleId参数是"./src/index.js"。再看看函数内部的主要实现：

// 定义 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的加载：

var _test__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/test.js");

test.js内又使用了message.js所以，test.js内部又会执行对message.js的加载。message.js执行完成之后，因为没有依赖项，所以直接返回了结果：

var b = 'world'
__webpack_exports__["default"] = (b)

执行完成之后，再一级一级返回到根文件index.js。最终完成整个文件依赖的处理。
整个过程中，我们像是通过一个依赖关系树的形式，不断地向数的内部进入，等返回结果，又开始回溯到根。

写在最后

我寻思这我当年在校学jquery那会儿怎么也不会想到如今前端也需要编译打包了，这真的是个超乎想象的领域。
网上找的一个实现webpack的项目

参考资料

webpack打包原理 ? 看完这篇你就懂了 !

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

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

2 comments

两仪橙
Chrome 70 | 10

April 30th, 2020 at 12:28 pm

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

Reply
1. YH_evIsAuthor
  Chrome 81 | 10
  
  April 30th, 2020 at 03:29 pm
  
  @两仪橙
  是的
  
  Reply

webpack打包原理

YH_evIs • 2020 年 04 月 30 日

什么是webpack

这篇文章不会讲webpack的用法，仅仅是工作原理。

阅读这篇文章前推荐预读我之前写的：

Node中的js模块思想（module）

写在前头一般我们刚学习js的时候，我们会用外链的方式引入一个库，如：<script type="t...

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

它的大致工作原理就如同他的首页banner图一样：
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 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。

插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。

从实践出发分析打包原理

让我们先定义三个文件：

// 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。
接下来看一下打包后的代码：

(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__) {
    // ...
  })
});

可以看到基本上都是以这种形式的：

(function(modules) {
  // ...
})({
 // ...
})

还看不懂的话解释一下，一般这种写法的js都是立即执行的意思：

(function(){}())
//or
(function(){})()

所以上面那一段代码实际上就是一个自执行函数，传入了一个modules对象，modules 对象是什么样的格式呢？打包后的代码里是这样子的：

{
  "./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 之后的代码：

"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?");

到这里基本上结构是分析完了，接着我们看看他的执行，自执行函数一开始执行的代码是：

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

调用了__webpack_require_函数，并传入了一个moduleId参数是"./src/index.js"。再看看函数内部的主要实现：

// 定义 module 格式   
var module = installedModules[moduleId] = {
      i: moduleId, // moduleId
      l: false, // 是否已经缓存
      exports: {} // 导出对象，提供挂载
};

modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

var _test__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/test.js");

test.js内又使用了message.js所以，test.js内部又会执行对message.js的加载。message.js执行完成之后，因为没有依赖项，所以直接返回了结果：

var b = 'world'
__webpack_exports__["default"] = (b)

写在最后

我寻思这我当年在校学jquery那会儿怎么也不会想到如今前端也需要编译打包了，这真的是个超乎想象的领域。
网上找的一个实现webpack的项目

参考资料

webpack打包原理 ? 看完这篇你就懂了 !

webpack打包原理

什么是webpack

webpack核心概念

Entry

Output

Module

Chunk

Loader

Plugin

从实践出发分析打包原理

写在最后

参考资料

Leave a Comment Cancel reply

2 comments

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

Hello world

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

我的第一篇博客文章

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

班级官网

webpack打包原理

五种开源协议

【学习笔录】每周一道算法题：Dota2 参议员

PHP-后盾网开发系列之360问答系统PHP系列培训教程

webpack打包原理

什么是webpack

webpack核心概念

Entry

Output

Module

Chunk

Loader

Plugin

从实践出发分析打包原理

写在最后

参考资料