Webpack 运行时代码分析 - ESM 静态导入模块

最新推荐文章于 2024-03-12 13:52:33 发布

AIGC小陈

最新推荐文章于 2024-03-12 13:52:33 发布

阅读量858

点赞数

文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/weixin_53312997/article/details/128779504

版权

文章内容：用 webpack 打包两个模块（通过 import 语法导入模块），分析打包后的代码，也就是 webpack 运行时代码。

代码准备

index.js

// const sum = require('./sum')
import sum, { test } from './sum';
import * as s from './sum';

console.log(sum(6, 9));
console.log("test", test);
console.log("s", s)

sum.js

const sum = (a, b) => {return a + b;
}

export default sum;
export const test = 'test';

webpack.config.js

const path = require('path')
module.exports = {entry: './index.js',output: {path: path.resolve(__dirname, 'build')},mode: 'none'
}

在控制台执行

npx webpack

输出 build/main.js 文件

/******/ (() => { // webpackBootstrap
/******/ 	"use strict";
/******/ 	var __webpack_modules__ = ([
/* 0 */,
/* 1 */
/***/ ((__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 */ "test": () => (/* binding */ test)
/* harmony export */ });
const sum = (a, b) => {return a + b;
}

/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (sum);
const test = 'test';

/***/ })
/******/ 	]);
/************************************************************************/
/******/ 	// 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 m