webpack模块化原理（处理cjs和esm混用，然后在浏览器中可执行）

亮学长

已于 2022-08-02 16:04:10 修改

阅读量1.5k

点赞数 3

分类专栏： webpack 文章标签： webpack javascript 前端

于 2022-08-02 11:52:11 首次发布

本文链接：https://blog.csdn.net/formylovetm/article/details/126119441

版权

webpack 专栏收录该内容

35 篇文章 2 订阅

订阅专栏

commonjs和esmodule如何实现在浏览器运行的（兼容低版本浏览器）

目录结构：
cjs.js
esm.js
cjs_index.js
esm_index.js
index.js
package.json
zanlan.config.js
打包后，会生成
bundle.js虽然很难观看，但是需要做一下清障处理，点击链接可学习
做了清除注释后，因为有很多自执行函数，我们继续简化处理
最终处理为

1. CommonJS模块化实现原理

上面打包的就是CommonJS代码最终打包结果，自行去看吧
代码展示下，可以复制仔细分析下

var __webpack_modules__ = ({
  "./src/js/cjs.js":
    ((module) => {
      const dateFormat = (date) => {
        return "2022-08-02";
      }
      const priceFormat = (price) => {
        return "999.00";
      }
      module.exports = {
        dateFormat,
        priceFormat
      }
    })
});
var __webpack_module_cache__ = {};
function __webpack_require__(moduleId) {
  var cachedModule = __webpack_module_cache__[moduleId];
  if (cachedModule !== undefined) return cachedModule.exports;
  var module = __webpack_module_cache__[moduleId] = {
    exports: {}
  };
  __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
  return module.exports;
}
var __webpack_exports__ = {};
const { dateFormat, priceFormat } = __webpack_require__("./src/js/cjs.js");
console.log(dateFormat("abc"));
console.log(priceFormat("abc"));

2. ES Module实现原理

修改zanlan.config.js的entry值，为entry: "./src/esm_index.js",
打包后整理后，为
在这里插入图片描述
上面图片的代码是在这里

var __webpack_modules__ = ({
  "./src/js/esm.js":
    ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
      __webpack_require__.r(__webpack_exports__);
      __webpack_require__.d(__webpack_exports__, {
        "mul": () => (mul),
        "sum": () => (sum)
      });
      const sum = (num1, num2) => {
        return num1 + num2;
      }
      const mul = (num1, num2) => {
        return num1 * num2;
      }

    })
});
var __webpack_module_cache__ = {};
function __webpack_require__(moduleId) {
  var cachedModule = __webpack_module_cache__[moduleId];
  if (cachedModule !== undefined) {
    return cachedModule.exports;
  }
  var module = __webpack_module_cache__[moduleId] = {
    exports: {}
  };
  __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
  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))
__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__ = {};
__webpack_require__.r(__webpack_exports__);
var _js_esm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/js/esm.js");
console.log((0, _js_esm__WEBPACK_IMPORTED_MODULE_0__.mul)(2, 3));
console.log((0, _js_esm__WEBPACK_IMPORTED_MODULE_0__.sum)(2, 3));

3. CommonJS加载ES Module的原理和 ES Module加载CommonJS的原理

修改zanlan.config.js的entry值，为entry: "./src/index.js",
打包后整理后，为
在这里插入图片描述
上面图片代码在这里

var webpack_modules = ({
  "./src/js/cjs.js":
    ((module) => {
      const dateFormat = (date) => {
        return "2022-08-02";
      }
      const priceFormat = (price) => {
        return "999.00";
      }
      module.exports = {
        dateFormat,
        priceFormat
      }
    }),
  "./src/js/esm.js":
    ((__unused_webpack_module, webpack_exports, webpack_require) => {
      webpack_require.r(webpack_exports);
      webpack_require.d(webpack_exports, {
        "mul": () => (mul),
        "sum": () => (sum)
      });
      const sum = (num1, num2) => {
        return num1 + num2;
      }
      const mul = (num1, num2) => {
        return num1 * num2;
      }
    })

});
var webpack_module_cache = {};
function webpack_require(moduleId) {
  var cachedModule = webpack_module_cache[moduleId];
  if (cachedModule !== undefined) {
    return cachedModule.exports;
  }
  var module = webpack_module_cache[moduleId] = {
    exports: {}
  };
  webpack_modules[moduleId](module, module.exports, webpack_require);
  return module.exports;
}
webpack_require.n = (module) => {
  var getter = module && module.__esModule ?
    () => (module['default']) :
    () => (module);
  webpack_require.d(getter, { a: getter });
  return getter;
};
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))
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 = {};
webpack_require.r(webpack_exports);

var www = webpack_require("./src/js/cjs.js");
var www_default = webpack_require.n(www);
const { sum, mul } = webpack_require("./src/js/esm.js");
console.log(sum(2, 3));
console.log(mul(2, 3));
console.log((0, www.dateFormat)("aaa"));
console.log((0, www.priceFormat)("bbb"))