webpack5打包生成文件分析（commonjs和es6模块系统）

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

weixin_41837346

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

阅读量1.6k

点赞数 1

分类专栏：前端工程化文章标签： webpack 前端模块系统

本文链接：https://blog.csdn.net/weixin_41837346/article/details/112716018

版权

本文分析了webpack5打包过程中对CommonJS和ES6模块系统的处理，包括生成文件的结构、模块输出值的区别、动态加载以及循环引用的情况。详细探讨了esModule的引用特性、commonJs的值拷贝行为，以及在动态import和循环引用时的执行顺序。同时提供了相关参考链接和代码示例。

摘要由CSDN通过智能技术生成

相关配置

webpack5

// webpack.config.js
module.exports = {
   
  mode: 'none'
}
// index.js
import str from "./main.js";
console.log(str);
// main.js
export default "hello leo~";

生成文件（去掉了注释）

(() => {
   
  "use strict";
  var __webpack_modules__ = ([
    ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
   
      __webpack_require__.r(__webpack_exports__);
      var _main_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
      console.log(_main_js__WEBPACK_IMPORTED_MODULE_0__.default);
    }),
    ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
   
      __webpack_require__.r(__webpack_exports__);
      __webpack_require__.d(__webpack_exports__, {
   
        "default": () => __WEBPACK_DEFAULT_EXPORT__
      });
      const __WEBPACK_DEFAULT_EXPORT__ = ("hello leo~");
    })
  ]);
  var __webpack_module_cache__ = {
   };

  function __webpack_require__(moduleId) {
   
    if (__webpack_module_cache__[moduleId]) {
   
      return __webpack_module_cache__[moduleId].exports;
    }
    var module = __webpack_module_cache__[moduleId] = {
   
      exports: {
   }
    };

    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
    console.log(module.exports, moduleId) // 测试代码
    return module.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_require__.o = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop)
  })();

  (() =>