webpack4.0源码解析之esModule打包分析
- 2021 年 2 月 17 日
- 筆記
入口文件index.js采用esModule方式导入模块文件，非入口文件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导出
//采用esmodule导入 import name from './index1.js' console.log('我是入口js文件') console.log(name)
//index1.js 采用CommonJS导出 module.exports="我不是入口文件"
(function(modules) { // webpackBootstrap // 此变量为缓存区，如果有缓存，从缓存中取，没缓存添加 var installedModules = {}; // The require function function __webpack_require__(moduleId) { //判断缓存中是否有对应的输出 if(installedModules[moduleId]) { return installedModules[moduleId].exports; } //如果没有缓存创建一个新的module,针对两次require的方法调用是不一样的 //因为作用域不同 var module = installedModules[moduleId] = { i: moduleId, l: false, exports: {} }; //改变this指向,调用函数 modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); // 表示已存在缓存中 module.l = true; // 返回输出 return module.exports; } // 将模块定义保存一份，通过m属性挂载到自定义方法 __webpack_require__.m = modules; // 保留缓存 __webpack_require__.c = installedModules; //d方法 getter, 'a', getter __webpack_require__.d = function(exports, name, getter) { //判断是否有name属性，取反表示条件成立 if(!__webpack_require__.o(exports, name)) { //添加a属性getter方法 并且可枚举 Object.defineProperty(exports, name, { enumerable: true, get: getter }); } }; //O方法 __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; // 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; }; //n方法 __webpack_require__.n = function(module) { //module里面是下面传递过来的字符串'我不是入口文件' var getter = module && module.__esModule ? function getDefault() { return module['default']; } : //没有__esModule所以 return module function getModuleExports() { return module; }; //调用d方法 把getter传入 getter就是上文中的getModuleExports函数 __webpack_require__.d(getter, 'a', getter); //返回getter方法 内部添加了一个a属性，值为'我不是入口文件' return getter; }; // __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"; //由于是esModule导入的,所以添加标记表明为esmodule __webpack_require__.r(__webpack_exports__); //webpack自定义的名字,调用了webpack内部的__webpack_require__方法 var _index1_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./index1.js */ "./src/index1.js"); //把index1.js中的module.exports导出的“我不是入口文件”传递给n方法 var _index1_js__WEBPACK_IMPORTED_MODULE_0___default = __webpack_require__.n(_index1_js__WEBPACK_IMPORTED_MODULE_0__); console.log('我是入口js文件') //默认打印的为挂载的default的a(get)方法 console.log(_index1_js__WEBPACK_IMPORTED_MODULE_0___default.a) }), "./src/index1.js": (function(module, exports) { //由于是commonJS规范导出，所以没有其他的操作 module.exports="我不是入口文件" }) });
针对于上述的代码主入口文件采用esmodule导入先用r方法标记，调用__webpack_require__方法，把index1.js中的”我不是入口文件”,传递给n方法，在内部判断index1.js是否为esmodule规范导出，如果为cmj模式导出则var
getter=function getModuleExports() { return module; }，之后传递getter到d方法，在d方法内部添加a属性getter方法 并且可枚举，在n方法内部return getter,返回getter方法 内部添加了一个a属性，值为’我不是入口文件’。
esModule导出
//采用esmodule导入 import index1default,{name} from './index1.js' console.log('我是入口js文件') console.log(index1default,'----->',name)
//index1.js 采用esModule导出 export default "我不是入口文件" export const name="张三"
(function(modules) { // webpackBootstrap // The module cache var installedModules = {}; // The require function function __webpack_require__(moduleId) { // Check if module is in cache if(installedModules[moduleId]) { return installedModules[moduleId].exports; } // Create a new module (and put it into the cache) var module = installedModules[moduleId] = { i: moduleId, l: false, exports: {} }; // Execute the module function 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"; __webpack_require__.r(__webpack_exports__); var _index1_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./index1.js */ "./src/index1.js"); //采用esmodule导入 console.log('我是入口js文件') console.log( _index1_js__WEBPACK_IMPORTED_MODULE_0__["default"], '----->', _index1_js__WEBPACK_IMPORTED_MODULE_0__["name"]) }), "./src/index1.js": (function(module, __webpack_exports__, __webpack_require__) { "use strict"; //r方法标记为esmodule __webpack_require__.r(__webpack_exports__); //通过d方法挂载name属性值暂时为undefined,当代码运行到下面的const name="张三"时 name的值为张三 __webpack_require__.d(__webpack_exports__, "name", function() { return name; }); __webpack_exports__["default"] = ("我不是入口文件"); const name="张三" }) });
针对于上述的代码与commonjs规范导出不同的是，index1.js文件导出用的esmoudle规范，首先通过r方法标记esmodule，然后通过d方法挂载name属性导出后面的name值为张三。
/***********************************************************************************************************************************************************************************************************************************************************/
心若计较，处处都是怨言；心若放宽，时时都是晴天。
