【前端必会】webpack的目标代码
2024-10-20 15:47:43
背景
webpack生成什么样的代码呢？同的模块依赖的写法（import、export export default），会导致生成代码的不同，下面介绍普通的import与export
开始
导出PI1，max
//index.js
let PI1 = 3.1415926;
let PI2 = 3.1415926;
function max(a, b) {
return a > b ? a : b;
}
console.log(PI2);
export { max, PI1 };
导出PI3，max
//index2.js
let PI3 = 3.1415926;
let PI4 = 3.1415926;
function max(a, b) {
return a > b ? a : b;
}
console.log(PI4);
export { max, PI3 };
导出默认
//index3.js
export default {
name: "默认模块",
};
主文件如下
//main.js
import { max, PI1 } from "./index";
import { max as max2, PI as PI2 } from "./index2";
import index3 from "./index3";
!(function () {
console.log(max(1, 2), PI1);
console.log(max2(3, 4), PI2);
console.log(index3);
})();
生成代码如下
//bundle.js
/******/ (function() { // webpackBootstrap
/******/ "use strict";
/******/ // The require scope
/******/ var __webpack_require__ = {};
/******/
/************************************************************************/
/******/ /* webpack/runtime/define property getters */
/******/ !function() {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = function(exports, definition) {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ !function() {
/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
/******/ }();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ !function() {
/******/ // 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 });
/******/ };
/******/ }();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// NAMESPACE OBJECT: ./src/index2.js
var index2_namespaceObject = {};
__webpack_require__.r(index2_namespaceObject);
__webpack_require__.d(index2_namespaceObject, {
"F": function() { return index2_max; }
});
;// CONCATENATED MODULE: ./src/index.js
let PI1 = 3.1415926;
let PI2 = 3.1415926;
function max(a, b) {
return a > b ? a : b;
}
console.log(PI2);
;// CONCATENATED MODULE: ./src/index2.js
let PI3 = 3.1415926;
let PI4 = 3.1415926;
function index2_max(a, b) {
return a > b ? a : b;
}
console.log(PI4);
;// CONCATENATED MODULE: ./src/index3.js
/* harmony default export */ var index3 = ({
name: "默认模块",
});
;// CONCATENATED MODULE: ./src/main.js
!(function () {
console.log(max(1, 2), PI1);
console.log(index2_max(3, 4), index2_namespaceObject.PI);
console.log(index3);
})();
/******/ })()
;
总结
- webpack_require 有r、o、d函数（后续还会有m、c、t、n、p等等）
- 一个文件如果没有吧所有的变量都导出，会生成一个namespaceObject对象（exports对象），里面存放导出的变量、函数
- webpack先通过r函数，初始化exports对象，标识对象为__esModule
- webpack再通过d函数（define），将导出的添加到exports对象中，
- 如果代码中没有导出的变量（下图），则将代码修改为取exports对象，这样得到一个undefined
- 重复的变量，会在名称前添加文件名
- 每个文件都变成了// CONCATENATED MODULE:（估计还有其他规则）
- 如果文件导出了default，也是会直接合并到主代码中。
最新文章
- SpringMVC学习--入门程序
- SQL Server 2008 建立分区表 脚本
- [转帖]译文：如何使用SocketAsyncEventArgs类（How to use the SocketAsyncEventArgs class）
- C++ 变量转换
- canvas生成遮罩图片
- TEXT文本编辑框3 点击按钮添加文本至文本输入框
- opencart配置
- AngularJS2环境配置
- vue-router实例
- 用Scrutor来简化ASP.NET Core的DI注册
- Andriod App类型简介
- Perl分片技术
- $resource详解
- 【性能提升神器】STRAIGHT_JOIN
- Codeforces Round #536 (Div. 2) E dp + set
- .net core读取json格式的配置文件
- Reading CLR via c# 4th Edition
- kubernetes实战(十一)：k8s使用openLDAP统一认证
- PHP-redis api 中文说明（转）
- c++11 时间类 std::chrono