首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

webpack4.x CommonJS模块化浅析

Posted in Javascript onNovember 09, 2018

先看下webpack官方文档中对模块的描述：

在模块化编程中，开发者将程序分解成离散功能块(discrete chunks of functionality)，并称之为模块。

每个模块具有比完整程序更小的接触面，使得校验、调试、测试轻而易举。 精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。

webpack 的核心概念之一就是一切皆模块，webpack 在项目中的作用就是，分析项目的结构，找到 JavaScript 模块以及其他一些浏览器不能直接运行的拓展语言（less，scss，typescript），并将其打包为合适的格式以供浏览器使用，它从一个项目的主文件开始，根据引用路径，找到所有其所依赖的文件，同时将这些文件进行处理（各种loader来解析，编译处理浏览器不能直接使用的文件），然后打包为一个或者多个浏览器可识别的JavaScript文件。

本文不会详细描述 webpack 的构建流程，毕竟官网已经说得比较详细了，这里主要是分析下 webpack 打包后的文件，将文件打包成什么样子，又是如何使用模块的。webpack 最早支持的代码模块化方式是 CommonJS，后面慢慢支持了 ES6、AMD 等，不论使用的是哪种方式，webpack 都可以对其进行解析和打包，本文例子中使用的是 CommonJS 规范，更多规范介绍可查看官方文档。

例子

为方便后面的说明，首先创建一个项目，也就是先建立一个文件夹 webpack-test（名字自拟），然后在里面新建一个 package.json 文件，用来做 npm 的说明，在 webpack-test 文件夹中使用命令：

npm init

执行命令后会询问一些问题，一路回车即可。然后安装下 webpack 的依赖包，如下命令：

npm install --save-dev webpack

再新建几个文件：

1、在项目根目录下新建文件夹 app 用来存放业务代码、文件夹 public 存放打包后的文件；
2、在app中新建入口文件 main.js;
3、在app中新建功能模块 hello.js，bye.js，to.js；
4、在项目根目录下，建立 index.html 文件；

然后依次来给这几个文件分别填写以下内容：

// webpack-test/app/hello.js
const to = require('./to.js');
module.exports = function() {
 var hello = document.createElement('div');
 hello.textContent = "Say Hello to " + to.name;
 return hello;
};
// webpack-test/app/bye.js
const to = require('./to.js');
module.exports = function() {
 var bye = document.createElement('div');
 bye.textContent = "Say Bye to " + to.name;
 return bye;
};
// webpack-test/app/to.js
module.exports = {name: "小明"};
// webpack-test/app/main.js
const hello = require('./hello.js');
const bye = require('./bye.js');

document.querySelector("#root").appendChild(hello()).appendChild(bye());;
// webpack-test/index.html
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>Webpack Test Project</title>
 </head>
 <body>
  <div id='root'></div>
  // bundle.js 文件就是一会儿我们要打包app中的文件后生成的结果文件
  <script src="public/bundle.js"></script>
 </body>
</html>

业务模块 hello.js 和 bye.js 做了各自的操作，同时引用了共同的文件 to.js；主文件 main.js 中引用并执行了模块 hello.js 和 bye.js；index.html 文件引入了 main.js 打包后的最终文件 bundle.js。

打包

接下来进行打包操作，先确保 webpack 是全局安装的，否则执行时需要指定 webpack 的路径，比如在 4.0 以下版本中使用 node_modules/.bin/webpack ./app/main.js ./public/bundle.js；
如果你使用的是 webpack4.0+ 的话，使用 webpack ./app/main.js ./public/bundle.js命令，也许会报以下的错误：

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

ERROR in multi ./app/main.js ./public/bundle.js
Module not found: Error: Can't resolve './public/bundle.js' in '/Users/zhaohaipeng/soyoung-project/webpack-test'
 @ multi ./app/main.js ./public/bundle.js main[1]

webpack4.0+之后，针对第一个报错，需要指定环境 --mode development；第二个报错，是因为我们没有使用配置文件的方式打包，而是直接使用的命令指定的打包输出位置，所以需要声明输出文件，综上，正确的命令如下：

webpack app/main.js --output public/bundle.js --mode development

执行结果：

➜  webpack-test webpack app/main.js --output public/bundle.js --mode development
Hash: a4e2f9ecc51b64891624
Version: webpack 4.25.1
Time: 90ms
Built at: 2018-11-08 17:11:01
    Asset      Size  Chunks             Chunk Names
bundle.js  5.16 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./app/bye.js] 165 bytes {main} [built]
[./app/hello.js] 173 bytes {main} [built]
[./app/main.js] 144 bytes {main} [built]
[./app/to.js] 30 bytes {main} [built]
➜  webpack-test

浏览器打开 index.html 文件，即可看到结果

Say Hello to 小明
Say Bye to 小明

但是 webpack 作为一个能简化我们开发难度和使用便捷的工具，显然像上面那样通过敲很多命令来打包，并不方便，所以下面采用配置文件的方式再来一次：

根目录创建 webpack.config.js 文件，并配置下打包入口和出口：

// webpack-test/webpack.config.js
module.exports = {
  mode: "development",//webpack.0之后需要声明环境
  entry: __dirname + "/app/main.js",//唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放目录
    filename: "bundle.js"//打包后输出文件名
  }
}

再次打包的时候，只需要使用命令 webpack 就可以了，webpack 默认读取当前路径下的 webpack.config.js 文件。

最终打包好的 bundle.js 文件，去除了多余注释，调整了代码格式，内容如下：

// 自执行函数，参数为所有模块组成的，形势为key:value，key是模块名
(function(modules) { // webpackBootstrap
  // 已加载模块的缓存，记录模块的加载情况，也是为了避免重复打包，节省资源
  var installedModules = {};

  // webpack 使用 require 方式加载模块的方法（模拟ConmmonJS reqiure()），作用为根据传进来的模块id来处理对应的模块，加入已加载缓存，执行，标记，返回exports
  function __webpack_require__(moduleId) {
    // moduleId 为模块路径
    // 检测模块是否已加载，已加载的话直接返回该模块
    if(installedModules[moduleId]) {
      return installedModules[moduleId].exports;
    }
    // 当前模块未加载的话，新建，并存于缓存
    var module = installedModules[moduleId] = {
      i: moduleId,
      l: false,
      exports: {}
    };

    // 在当前模块的 exports 下，也就是模块的内部执行模块代码，突出作用域
    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

    // 标记模块已经加载
    module.l = true;

    // 返回模块的导出内容
    return module.exports;
  }


  // 挂载属性，该模块 (__webpack_modules__)
  __webpack_require__.m = modules;

  // 挂载属性，模块加载缓存
  __webpack_require__.c = installedModules;

  // 本代码中未执行，暂时不分析
  // 在 exports 中定义 getter 方法
  __webpack_require__.d = function(exports, name, getter) {
    // 当 name 属性不是定义在对象本身，而是继承自原型链，则在在 exports 中定义 getter 方法
    if(!__webpack_require__.o(exports, name)) {
      Object.defineProperty(exports, name, { enumerable: true, get: getter });
    }
  };

  // 本代码中未执行，暂时不分析
  // 在 exports 中定义 __esModule，定义key为Symbol的属性（在__webpack_require__.t中被调用）
  // 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 = "";


  // 加载入口模块 main.js ，返回 exports，从而从入口文件开始执行，以递归的方式，将所有依赖执行并返回
  return __webpack_require__(__webpack_require__.s = "./app/main.js");
})({

  "./app/bye.js": (function(module, exports, __webpack_require__) {

    eval("const to = __webpack_require__(/*! ./to.js */ \"./app/to.js\");\nmodule.exports = function() {\n var bye = document.createElement('div');\n bye.textContent = \"Say Bye to \" + to.name;\n return bye;\n};\n\n//# sourceURL=webpack:///./app/bye.js?");

  }),

  "./app/hello.js": (function(module, exports) {

    eval("module.exports = function() {\n var hello = document.createElement('div');\n hello.textContent = \"Say Hello!\";\n return hello;\n};\n\n//# sourceURL=webpack:///./app/hello.js?");

  }),

  "./app/main.js": (function(module, exports, __webpack_require__) {

    eval("const hello = __webpack_require__(/*! ./hello.js */ \"./app/hello.js\");\nconst bye = __webpack_require__(/*! ./bye.js */ \"./app/bye.js\");\n\ndocument.querySelector(\"#root\").appendChild(hello()).appendChild(bye());;\n\n//# sourceURL=webpack:///./app/main.js?");

  }),

  "./app/to.js": (function(module, exports) {

    eval("module.exports = {name: \"小明\"};\n\n//# sourceURL=webpack:///./app/to.js?");

  })

});

分析

webpack 的运行过程可分为：读取配置参数，实例化插件，模块解析处理（loader），输出打包文件；在上面例子中，仅为 JavaScript 的引用，没有使用插件和像CSS、less、图片之类需要loader处理的模块，所以上面的例子，过程只有读取配置，识别入口及其引用模块，打包几步，生成最终的 bundle.js 文件。

简单描述下 webpack 在这个过程中的执行流程：在配置文件中读取入口，如果有配置 plugins 参数，那么也是在此时进行插件的实例化和钩子函数的绑定；模块解析，也就是loader加入的时刻，从入口文件开始，根据入口文件对其他模块的依赖，结合配置文件中对不同种类型文件所使用的 loader（加载器） 说明，一个一个逐级对这些模块进行解析处理，或压缩，或转义，生成浏览器可以直接识别的内容；最后将所有模块进行打包，输出打包后的文件。在上面的代码中，已经对 bundle.js 内容进行了内容注释，下面我们来分析下 bundle.js 的执行过程：

1、自执行函数

最后的输出的文件 bundle.js 是一个 JavaScript 文件，其本身其实是一个自执行函数

(function(参数){})(参数)。

2、参数

自执行方法的参数为所有模块组成的对象，key 为各个模块的路径，值为各模块内部的执行代码，观察参数内部的代码，对比打包前的源码，可以发现凡是 require 都变成了__webpack_require__这个webpack自定义的模块调用方法，而且源码中的相对路径也变成了最终执行位置的文件的相对路径。

{

  "./app/bye.js": (function(module, exports, __webpack_require__) {

    eval("const to = __webpack_require__(/*! ./to.js */ \"./app/to.js\");\nmodule.exports = function() {\n var bye = document.createElement('div');\n bye.textContent = \"Say Bye to \" + to.name;\n return bye;\n};\n\n//# sourceURL=webpack:///./app/bye.js?");

  }),

  "./app/hello.js": (function(module, exports) {

    eval("module.exports = function() {\n var hello = document.createElement('div');\n hello.textContent = \"Say Hello!\";\n return hello;\n};\n\n//# sourceURL=webpack:///./app/hello.js?");

  }),

  "./app/main.js": (function(module, exports, __webpack_require__) {

    eval("const hello = __webpack_require__(/*! ./hello.js */ \"./app/hello.js\");\nconst bye = __webpack_require__(/*! ./bye.js */ \"./app/bye.js\");\n\ndocument.querySelector(\"#root\").appendChild(hello()).appendChild(bye());;\n\n//# sourceURL=webpack:///./app/main.js?");

  }),

  "./app/to.js": (function(module, exports) {

    eval("module.exports = {name: \"小明\"};\n\n//# sourceURL=webpack:///./app/to.js?");

  })

}

3、执行

（1）自执行文件开始执行后，到自执行函数最底部，首先从入口文件开始加载

return __webpack_require__(__webpack_require__.s = "./app/main.js");

（2）__webpack_require__函数被调用，传入参数 ./app/main.js，

function __webpack_require__(moduleId) {
    // moduleId 为 ./app/main.js
    // 首次进来，未加载，模块还没有缓存
    if(installedModules[moduleId]) {
      return installedModules[moduleId].exports;
    }
    // 新建 ./app/main.js 模块，并存于缓存
    var module = installedModules[moduleId] = {
      i: moduleId,
      l: false,
      exports: {}
    };

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

    // 标记模块已经加载
    module.l = true;

    // 输出模块的内容
    return module.exports;
  }

此时方法中执行 modules[moduleId].call(module.exports, module, module.exports,__webpack_require__); 相当于在名为 ./app/main.js 的模块中执行如下代码：

(function(module, exports, __webpack_require__) {

    eval("const hello = __webpack_require__(/*! ./hello.js */ \"./app/hello.js\");\nconst bye = __webpack_require__(/*! ./bye.js */ \"./app/bye.js\");\n\ndocument.querySelector(\"#root\").appendChild(hello()).appendChild(bye());;\n\n//# sourceURL=webpack:///./app/main.js?");

})()

由于引用关系，接下来会再次执行两次__webpack_require__方法，分别传参模块路径 ./app/hello.js 和 ./app/bye.js；

（3）执行第一个__webpack_require__过程，除了传参不同、执行的模块不同，与第二步基本一致，再次找到了依赖模块 to.js，再次调用__webpack_require__。

"./app/hello.js": (function(module, exports, __webpack_require__) {

  eval("const to = __webpack_require__(/*! ./to.js */ \"./app/to.js\");\nmodule.exports = function() {\n var hello = document.createElement('div');\n hello.textContent = \"Say Hello to \" + to.name;\n return hello;\n};\n\n//# sourceURL=webpack:///./app/hello.js?");

}),

（4）执行第二个__webpack_require__时，在 bye.js 中找到了对于 to.js 的依赖，所以将继续调用__webpack_require__方法，只是传参变成了./app/to.js，达到终点。

"./app/bye.js": (function(module, exports, __webpack_require__) {

    eval("const to = __webpack_require__(/*! ./to.js */ \"./app/to.js\");\nmodule.exports = function() {\n var bye = document.createElement('div');\n bye.textContent = \"Say Bye to \" + to.name;\n return bye;\n};\n\n//# sourceURL=webpack:///./app/bye.js?");

})

（5）到此时，整个从入口文件的开始的针对所依赖模块的解析已经完成，所有的 js 代码也已经引用完毕且放到了 bundle.js 中。

总结

到这里可以看到，webpack对js的打包，就是封装为一个个单独的方法，通过对这些方法的引用，达到模块化的效果；而打包的过程，就是查找、解析、封装这些方法的过程，整个执行路径类似于一棵树，从主干出发，沿着树枝递归式的执行“require”方法，而且是直到这一根树枝走到尽头的时候才回头寻找其他的方法，由于node的单线程，当项目庞大或者模块间依赖错综复杂时，webpack打包会更加的耗费时间。

以上为对webpack4.x中针对js模块处理的简单理解，主要基于官方文档的介绍和打包后文件的分析，源码读起来还是比较难懂，暂时不敢照量。对于 ES6、AMD 的模块化方式，代码分割的等，后续再进行补充。希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

webpack4.x CommonJS模块化浅析

- Author -

大海Jarvis

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery 层次选择器siblings与nextAll的区别介绍
Aug 02 Javascript
js history对象简单实现返回和前进
Oct 30 Javascript
javascript中parentNode,childNodes,children的应用详解
Dec 17 Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
Node.js的Express框架使用上手指南
Mar 12 Javascript
node.js文件上传处理示例
Oct 27 Javascript
利用javascript实现的三种图片放大镜效果实例（附源码）
Jan 23 Javascript
利用JS hash制作单页Web应用的方法详解
Oct 10 Javascript
vue.js实现备忘录demo
Jun 26 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
为什么node.js不适合大型项目
Apr 28 Javascript
angular4笔记系列之内置指令小结
Nov 09 #Javascript
node版本管理工具n包使用教程详解
Nov 09 #Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 #Javascript
vue.js层叠轮播效果的实例代码
Nov 08 #Javascript
vue-cli 构建骨架屏的方法示例
Nov 08 #Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 #Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 #Javascript
SSH(3) 时钟(1) character(1) mysql(6) OVERLORD(1) 数据表(1) 算法(1) 人人对战(1) Vscode(3) 2022年7月新番(1)
You might like
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
分享一下贝贝成长进度的php代码
2012/09/14 PHP
PHP中使用TCPDF生成PDF文档实例
2014/07/01 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
php for 循环使用的简单实例
2016/06/02 PHP
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
jquery实现左右无缝轮播图
2020/07/31 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
2016/08/05 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
Python去除字符串两端空格的方法
2015/05/21 Python
浅谈python中截取字符函数strip，lstrip，rstrip
2015/07/17 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
Vrbo英国：预订度假屋
2020/08/19 全球购物
xxx同志考察材料
2014/02/07 职场文书
不拖欠农民工工资承诺书
2014/03/31 职场文书
补充协议书范本
2014/04/23 职场文书
会计求职信
2014/05/29 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
学历证明样本
2015/06/16 职场文书
公司周年庆典致辞
2015/07/30 职场文书
教务处教学工作总结
2015/08/10 职场文书
JavaScript控制台的更多功能
2021/04/28 Javascript