webpack 产物分析

哥总2023-11-29 9:53

创建webpack-demo

使用webpack@5.89.0创建webpack-demo项目，文件结构如下：

utils.js

js 复制代码 
export const printHello = () => {
  console.log("hello world");
};

const key = "yes";

export default key;

入口文件index.js

js 复制代码 
import key, { printHello } from "./utils";

function component() {
  const element = document.createElement("div");
  element.innerText = "webpack";

  printHello();
  console.log("key: ", key);

  return element;
}

document.body.appendChild(component());

使用默认webpack配置，在package.json添加"build": "webpack --mode=development --devtool=false"，使用开发模式并关闭devtool保证产物可读性

运行npm run build在/dist目录下生成main.js文件

js 复制代码 
/******/ (() => { // webpackBootstrap
/******/ 	"use strict";
/******/ 	var __webpack_modules__ = ({

/***/ "./src/utils.js":
/*!**********************!*\
  !*** ./src/utils.js ***!
  \**********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__),
/* harmony export */   printHello: () => (/* binding */ printHello)
/* harmony export */ });
const printHello = () => {
  console.log("hello world");
};

const key = "yes";

/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (key);


/***/ })

/******/ 	});
/************************************************************************/
/******/ 	// The module cache
/******/ 	var __webpack_module_cache__ = {};
/******/ 	
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/ 		// Check if module is in cache
/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
/******/ 		if (cachedModule !== undefined) {
/******/ 			return cachedModule.exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = __webpack_module_cache__[moduleId] = {
/******/ 			// no module.id needed
/******/ 			// no module.loaded needed
/******/ 			exports: {}
/******/ 		};
/******/ 	
/******/ 		// Execute the module function
/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/ 	
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/ 	
/************************************************************************/
/******/ 	/* webpack/runtime/define property getters */
/******/ 	(() => {
/******/ 		// define getter functions for harmony exports
/******/ 		__webpack_require__.d = (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 */
/******/ 	(() => {
/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ 	})();
/******/ 	
/******/ 	/* webpack/runtime/make namespace object */
/******/ 	(() => {
/******/ 		// define __esModule on exports
/******/ 		__webpack_require__.r = (exports) => {
/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 			}
/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
/******/ 		};
/******/ 	})();
/******/ 	
/************************************************************************/
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
(() => {
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils */ "./src/utils.js");


function component() {
  const element = document.createElement("div");
  element.innerText = "webpack";

  (0,_utils__WEBPACK_IMPORTED_MODULE_0__.printHello)();
  console.log("key: ", _utils__WEBPACK_IMPORTED_MODULE_0__["default"]);

  return element;
}

document.body.appendChild(component());

})();

/******/ })()
;

对代码进行分析

  1. 代码最外层是一个立即执行函数
  2. 定义__webpack_modules__对象，key是模块路径，值是模块内容
  3. 定义__webpack_require__函数，并且添加.d,.r,.o三个属性，都是函数
  4. 执行入口代码

1. __webpack_modules__

__webpack_modules__是一个对象，key是模块文件相对根目录的路径./src/utils.js，值是一个函数，内部包含utils.js模块内容

js 复制代码 
  var __webpack_modules__ = {
    "./src/utils.js": (
      __unused_webpack_module,
      __webpack_exports__,
      __webpack_require__
    ) => {
      // __unused_webpack_module 没有用到的参数
      // __webpack_exports__ 是一个空对象，把 utils.js 模块导出的内容添加到__webpack_exports__里
      __webpack_require__.r(__webpack_exports__);
      __webpack_require__.d(__webpack_exports__, {
        default: () => __WEBPACK_DEFAULT_EXPORT__,
        printHello: () => /* binding */ printHello,
      });
      
      // utils.js模块代码
      const printHello = () => {
        console.log("hello world");
      };

      const key = "yes";

      const __WEBPACK_DEFAULT_EXPORT__ = key;
    },
  };

2. __webpack_require__

__webpack_require__是一个函数，作用是返回module.exports对象

js 复制代码 
function __webpack_require__(moduleId) { 
    // moduleId是模块的路径
    // 1. 从缓存对象__webpack_module_cache__取出模块信息，__webpack_module_cache__是一个空对象
    var cachedModule = __webpack_module_cache__[moduleId];
    if (cachedModule !== undefined) {
      return cachedModule.exports;
    }

    // 2. 创建一个模块，并给__webpack_module_cache__赋值
    var module = (__webpack_module_cache__[moduleId] = {
      // no module.id needed
      // no module.loaded needed
      exports: {},
    });

    // 3. 从__webpack_modules__取出moduleId对应的函数并执行
    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);

    // 4. 返回module.exports
    return module.exports;
}

__webpack_require__.o定义了一个工具方法，作用是检查对象的属性是自身属性还是原型属性

js 复制代码 
__webpack_require__.o = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);

__webpack_require__.r作用是给exports对象加一个Module标志，代码内不起作用，可以忽略

js 复制代码 
__webpack_require__.r = (exports) => {
  if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
    Object.defineProperty(exports, Symbol.toStringTag, {
      value: "Module",
    });
  }
  Object.defineProperty(exports, "__esModule", { value: true });
};

__webpack_require__.d作用是把第二个参数的自身属性转移到exports对象上

js 复制代码 
__webpack_require__.d = (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_modules__对象内容基本都是下面的形式

js 复制代码 
{
    "path to file": (, exports, __webpack_require__) => {
        1. 执行 __webpack_require__.d 函数，把模块导出属性添加到 exports 对象上
        2. 模块内容
    }
}

3. 入口文件的执行

js 复制代码 
  var __webpack_exports__ = {};
  // 使用立即执行函数，防止内部变量污染
  (() => {
  
    // 给__webpack_exports__添加esModule标志
    __webpack_require__.r(__webpack_exports__);
    
    // 取出源码中import模块导出的内容
    var _utils__WEBPACK_IMPORTED_MODULE_0__ =
      __webpack_require__("./src/utils.js");
      
    // 入口文件源码
    function component() {
      const element = document.createElement("div");
      element.innerText = "webpack";
      // 使用用模块导出的属性
      (0, _utils__WEBPACK_IMPORTED_MODULE_0__.printHello)();
      console.log("key: ", _utils__WEBPACK_IMPORTED_MODULE_0__["default"]);

      return element;
    }

    document.body.appendChild(component());
  })();

主要是两步工作：

  1. 取出模块导出的属性
  2. 执行入口文件源码，使用模块导出的属性

总结

  1. webpack的打包结果里，实现了一套基于webpack_require和webpack_exports的一套模块化规范，通过把源码中的一个个文件作为key + function的形式存储进webpack_modules里，同时会把在源码中所有模块化规范 都改成webpak_require和他自己的exports，加载的时候就是执行对应的webpack_modules里的对应key的函数，这个函数执行完成以后就会把对应的exports对象里写满值，默认导出就会有一个default属性，在 expoprts对象上具名导出就是具体的key在exports对象上
  2. 由于导入语句使用了webpack_require，这个webpack_require会返回已经填充好值的exports对象
  3. 然后在使用的时候 直接是把我们原来使用模式从模块化改成对象.key的使用模式
相关推荐
Komorebi_999919 小时前
webpack相关
前端·webpack·node.js
伍哥的传说1 天前
Webpack5 新特性与详细配置指南
webpack·前端框架·vue·vue3·react·webpack5·前端构建
半桶水专家1 天前
webpack和vite对比
前端·webpack·node.js
今天也在写bug5 天前
webpack中SplitChunks的分割策略
前端·webpack·性能优化·代码分割·splitchunks
ᥬ 小月亮5 天前
webpack高级配置
运维·前端·webpack
豆豆（设计前端）5 天前
解决Vue页面黑底红字遮罩层报错：Unknown promise rejection reason (webpack-internal)
前端·vue.js·webpack
拾光拾趣录6 天前
Webpack性能优化：10个杀手级提速技巧
前端·webpack·turbopack
燃烧的土豆6 天前
React 18 全局错误捕获 + React-router 6 动态权限路由
javascript·react.js·webpack
belowfrog7 天前
模块联邦
webpack
拾光拾趣录7 天前
Vite 与 Webpack 热更新原理
前端·webpack·vite
热门推荐
01全球最强模型Grok4，国内已可免费使用！（附教程）02Cursor Claude 模型无法使用的解决方法03KGG转MP3工具|非KGM文件|解密音频04【2025.7.18】更新vscode后所有.vue文件template标签后报红的临时解决办法，Vue - Official 插件3.0.2导致05【无标题】06集群聊天服务器---MySQL数据库的建立07突破限制：使用 Claude Code Proxy 让 Claude Code 自由连接任意模型08绿色建筑新态势：楼宇自控助力能效提升，推动成本优化新路径09使用Ruby接入实时行情API教程10Claude Code 最新版已经支持 Windows 安装使用！