webpack4.0源码解析之esModule打包分析
入口文件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值为张三。
/***********************************************************************************************************************************************************************************************************************************************************/
心若计较，处处都是怨言；心若放宽，时时都是晴天。
webpack4.0源码解析之esModule打包分析的更多相关文章
- webpack4.0源码解析之打包后js文件分析
首先,init之后创建一个简单的webpack基本的配置,在src目录下创建两个js文件(一个主入口文件和一个非主入口文件)和一个html文件,package.json,webpack.config. ...
- solr&lucene3.6.0源码解析（四）
本文要描述的是solr的查询插件,该查询插件目的用于生成Lucene的查询Query,类似于查询条件表达式,与solr查询插件相关UML类图如下: 如果我们强行将上面的类图纳入某种设计模式语言的话,本 ...
- solr&lucene3.6.0源码解析（三）
solr索引操作(包括新增 更新 删除 提交 合并等)相关UML图如下 从上面的类图我们可以发现,其中体现了工厂方法模式及责任链模式的运用 UpdateRequestProcessor相当于责任链模式 ...
- Heritrix 3.1.0 源码解析（三十七）
今天有兴趣重新看了一下heritrix3.1.0系统里面的线程池源码,heritrix系统没有采用java的cocurrency包里面的并发框架,而是采用了线程组ThreadGroup类来实现线程池的 ...
- Android事件总线（二）EventBus3.0源码解析
1.构造函数 当我们要调用EventBus的功能时,比如注册或者发送事件,总会调用EventBus.getDefault()来获取EventBus实例: public static EventBus ...
- solr&lucene3.6.0源码解析（二）
上文描述了solr3.6.0怎么采用maven管理的方式在eclipse中搭建开发环境,在solr中,为了提高搜索性能,采用了缓存机制,这里描述的是LRU缓存,这里用到了 LinkedHashMap类 ...
- solr&lucene3.6.0源码解析（一）
本文作为系列的第一篇,主要描述的是solr3.6.0开发环境的搭建 首先我们需要从官方网站下载solr的相关文件,下载地址为http://archive.apache.org/dist/luc ...
- apache mina2.0源码解析（一）
apache mina是一个基于java nio的网络通信框架,为TCP UDP ARP等协议提供了一致的编程模型:其源码结构展示了优秀的设计案例,可以为我们的编程事业提供参考. 依照惯例,首先搭建a ...
- DataX 3.0 源码解析一
源码解析 基本调用类分析 任务启动由python脚本新建进程进行任务执行,后续执行由Java进行,以下将对java部分进行分 其中的调用原理机制. Engine 首先入口类为com.alibaba.d ...
随机推荐
- pyinstaller打包shotgun有关的程序
By 鬼猫猫 http://www.cnblogs.com/muyr/ 背景 使用pyinstaller打包跟shotgun有关的程序后,在自己电脑上运行都OK,但是编译好的exe在其他人的电脑上运行 ...
- ubuntu 更改U盘设备分区/dev/sdb4 标识
备份u盘分区表 代码: sudo sfdisk -d /dev/sdb > sdb_table 修改sdb_table文件 代码: gedit sdb_table 恢复u盘分区表 代码: sud ...
- pickle — Python object serialization
pickle - Python object serialization 消息队列
- Centos 7 Redis 安装并开机启动
一.下载并编译 cd /usr/local/bin目录可以自己选,我将redis安装到/usr/local/bin目录下.wget http://download.redis.io/releases/ ...
- python中贪婪与非贪婪
Python里数量词默认是贪婪的(在少数语言里也可能是默认非贪婪),总是尝试匹配尽可能多的字符: 非贪婪则相反,总是尝试匹配尽可能少的字符. 在"*","?", ...
- 九鼎S5PV210开发板的SD卡启动、uboot tftp升级内核镜像
Note: 我的S5PV210板子的磁盘是emmc版本,不是nandflash版本. 1. SD卡内烧录uboot镜像,然后作为启动盘来启动emmc中的内核镜像和根文件系统. 只要破坏emmc内的ub ...
- STM32 定时器详细篇（基于HAL库）
l 16位的向上.向下.向上/向下(中心对齐)计数模式,支持自动重装载 l 16位的预分频器 l 每个定时器都有多个独立通道,每个通道可用于 * 输入捕获 * 输出比较 * PWM输出 * ...
- 十五：SpringBoot-配置Actuator组件,实现系统监控
SpringBoot-配置Actuator组件,实现系统监控 1.Actuator简介 1.1 监控组件作用 1.2 监控分类 2.SpringBoot整合Actuator 2.1 核心依赖Jar包 ...
- Box Model 盒子模型
Box Model盒子模型,是初学者在学习HTMl5时会学到的一个重要的模型,也有一些人称它为框模型,因为盒子是属于3维,而框是平面的.称之为盒子模型,是因为其结构和盒子十分相似,其最外面是margi ...
- HDU5691 Sitting in Line【状压DP】
HDU5691 Sitting in Line 题意: 给出\(n\)个数字,有些数字的位置固定了,现在要求把所有没固定的数字放在一个位置,使得任意相邻两个位置的数字的相乘的和最大 题解: \(n\) ...