webpack4.X源码解析之CommonJS打包分析
入口文件index.js采用CommonJS方式导入模块文件，非入口文件index1.js分别采用CommonJS和esmodule规范进行导出。
首先,init之后创建一个简单的webpack基本的配置,在src目录下创建两个js文件（一个主入口文件和一个非主入口文件）和一个html文件,package.json，webpack.config.js公共部分代码如下：（除JS之外的部分）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
{ "name": "mywebpack", "version": "1.0.0", "main": "index.js", "license": "MIT", "devDependencies": { "html-webpack-plugin": "4.5.0", "webpack": "4.44.2", "webpack-cli": "3.3.12" } }
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
devtool: 'none',
mode: 'development',
entry: './src/index.js',
output: {
filename: 'built.js',
path: path.resolve('dist')
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
}
运行yarn webpack打包之后生成的built.js文件
1 打包之后的js文件是一个匿名函数自调用和一个当前函数调用时传入的一个对象
2 这个对象暂且称之为模块定义,它是一个键值对
3 这个对象的键名是当前加载模块的文件名和某个目录的拼接
4 这个键的值就是一个函数,和node.js模块加载有一些类似,会将被加载模块中的内容包裹在一个函数中
5 这个函数在将来某个时间点上会被调用，同时接收到一定的参数,利用这些参数可以实现模块的加载操作。
CommonJS导出
//index.js var name=require('./index1.js') console.log('我是入口js文件') console.log(name)
//index1.js 采用CommonJS导出 module.exports="我不是入口文件"
//定义对象用于将来缓存被加载过的模块 var installedModules = {}; //定义一个 __webpack_require__ 方法来替换 import require 加载操作 function __webpack_require__(moduleId) { //判断当前缓存中是否存在要被加载的模块内容，如果存在则直接返回 if(installedModules[moduleId]) { return installedModules[moduleId].exports; } //如果没有缓存创建一个新的module,针对两次require的方法调用是不一样的 var module = installedModules[moduleId] = { i: moduleId, l: false, exports: {} }; //如果当前缓存中不存在则需要我们自己定义{} 执行被导入的模块内容加载 modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); //当上述的方法调用完成之后，我们就可以修改 l 的值用于表示当前模块内容已经加载完成了 module.l = true; //加载工作完成之后，要将拿回来的内容返回至调用的位置 return module.exports; } // m 属性用于保存 modules __webpack_require__.m = modules; // 保留缓存 __webpack_require__.c = installedModules; // 定义 d 方法用于在对象的身上添加指定的属性，同时给该属性提供一个 getter __webpack_require__.d = function(exports, name, getter) { //o 方法用于判断对象的身上是否存在指定的属性 if(!__webpack_require__.o(exports, name)) { Object.defineProperty(exports, name, { enumerable: true, get: getter }); } }; // 定义 r 方法用于标识当前模块是 es6 类型 __webpack_require__.r = function(exports) { //下面的条件如果成立就说明是一个 esmodule规范 if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); } //如果条件不成立,我们也直接在exports对象爱那个身上添加__esModule,它的值是true 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) { // 1 调用 t 方法之后，我们会拿到被加载模块中的内容 value // 2 对于 value 来说我们可能会直接返回，也可能会处理之后再返回 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; }; // 定义 n 方法，用于设置具体的 getter __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; }; // o 方法用于判断对象的身上是否存在指定的属性 __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; // 用于保存资源访问路径 __webpack_require__.p = ""; // Load entry module and return exports return __webpack_require__(__webpack_require__.s = "./src/index.js"); }) /************************************************************************/ ({ "./src/index.js": //这块载入的时候传入了__webpack_require__方法，而下面index1.js未传入__webpack_require__方法 //原因在于index1不需要再require其它模块了 (function(module, exports, __webpack_require__) { var name=__webpack_require__(/*! ./index1.js */ "./src/index1.js") console.log('我是入口js文件') console.log(name) }), "./src/index1.js":
(function(module, exports) {
//针对commonJS导出的模块是不需要webpack做处理的 module.exports="我不是入口文件" }) });
针对于上述的代码就相当于是将 {}（模块定义） 传递给了 modules,之后进行了代码运行，分模块导入导出，打包之后的文件__webpack_require__里面的方法。
ESmodules导出
var obj=require('./index1.js') console.log('我是入口js文件') console.log(obj.default,'----->',obj.name)
//采用esmodule规范导出 export default '我不是主入口文件' export const name='张三'
(function(modules) { // webpackBootstrap 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__); module.l = true; return module.exports; } __webpack_require__.m = modules; __webpack_require__.c = installedModules; // d方法 __webpack_require__.d = function(exports, name, getter) { //判断exports里面是否有name属性 if(!__webpack_require__.o(exports, name)) { //如果没有,会添加一个name属性,enumerable表示值为可枚举的,新增了name属性 //值为匿名函数return name Object.defineProperty(exports, name, { enumerable: true, get: getter }); } }; //r方法 __webpack_require__.r = function(exports) { if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { //如果为esmodule添加一个单一的toStringTag，value为Module Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); } //告诉我们现在核心被打包的模块时__ESmodule,值value为true 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, exports, __webpack_require__) { var obj=__webpack_require__(/*! ./index1.js */ "./src/index1.js") console.log('我是入口js文件') console.log(obj.default,'----->',obj.name) }), "./src/index1.js": //参数上针对commonJS规范有变化,传的不是exports，而是__webpack_exports__, //但是只是改了个名字,值并未变化 (function(module, __webpack_exports__, __webpack_require__) { //以下方法对esmodule模块打包做了处理，处理后的值放在__webpack_exports__中 "use strict"; //调用r方法,是要涉及到esmodule的打包就要进行r方法加标记 __webpack_require__.r(__webpack_exports__); //调用d方法 添加name属性,值为undefined __webpack_require__.d(__webpack_exports__, "name", function() { return name; }); //添加default属性,值为"我不是主入口文件" __webpack_exports__["default"] = ('我不是主入口文件'); //赋值name值为张三 const name='张三' }) });
针对ESmodule，webpack调用了r和d方法做了处理之后导出，其他的步骤与CommonJS规范无差别，在此不再加注释。
/***************************************************************************************************************/
没人会把我们变得越来越好，时间也只是陪衬。支撑我们变的越来越好的是我们自己不断进阶的才华，修养，品行以及不断的反思和修正。
---感谢阅读，o(*￣︶￣*)o开心每一天！
posted on 2021-02-16 16:51 メSerendipity 阅读(459) 评论(0) 编辑 收藏 举报
