浅谈Webpack是如何打包CommonJS的

目录

• 一、书写代码
• 二、使用webpack打包编译
• 三、解析

CommonJS 是 Node 中的一种模块化规范，其是一种运行在 Node 环境下的代码，这种代码是不能直接运行到浏览器环境中的。但是在日常使用 webpack 的项目中不用做额外的处理，我们也能使用 CommonJS 来书写代码，那么 webpack 在这背后做了什么呢？

我们这里不看编译时，只看运行时

一、书写代码

使用yarn init -y命令初始化一个package.json文件。 接着yarn add webpack安装一下webpack。 目录下创建一个index.js内容如下：

const sum = require('./sum')

console.log(sum(1, 2))

sum.js文件内容如下：

module.exports = (...args) => args.reduce((x, y) => x + y, 0)

二、使用webpack打包编译

这里不想写webpack的配置文件然后再通过 webpack-cli 来打包，就直接写一个打包的文件。

// build.js
const webpack = require('webpack')

function f1() {
	return webpack({
		entry: './index.js',
		mode: 'none',
		output: {
			iife: false,
			pathinfo: 'verbose' // verbose: 冗余；尽可能的详细
		}
	})
}

f1().run((err, stat) => {
	console.log('打包')
})

接着在终端跑一下这个文件

node build.js

如果成功的话就会出来一个dist目录，里面有个main.js总共就是50行代码，其中大部分都是注释，代码如下

var __webpack_modules__ = ([
/* 0 */,
  /* 1 */
  /*!****************!*\
    !*** ./sum.js ***!
    \****************/
  /*! unknown exports (runtime-defined) */
  /*! runtime requirements: module */
  /*! CommonJS bailout: module.exports is used directly at 1:0-14 */
  ((module) => {
    module.exports = (...args) => args.reduce((x, y) => x + y, 0)
  })
]);
/************************************************************************/
// 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;
}

/************************************************************************/
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
(() => {
  /*!******************!*\
    !*** ./index.js ***!
    \******************/
  /*! unknown exports (runtime-defined) */
  /*! runtime requirements: __webpack_require__ */
  const sum = __webpack_require__(/*! ./sum */ 1)

  console.log(sum(1, 2))
})();

三、解析

我们再把代码精简一下，并加上注释

// 存放的模块，是一个数组
const __webpack_modules__ = [
  ,
  ((module) => {
    // sum.js 中的内容
    module.exports = (...args) => args.reduce((x, y) => x + y, 0)
  })
]

// 模块缓存（也就是说如果模块已经被引用过了就直接从这儿拿）
const __webpack_module_cache__ = {}

// moduleId 为 __webpack_modules__ 的下标
function __webpack_require__(moduleId) {
  // 如果能从缓存里面拿到，则直接返回
  const cachedModule = __webpack_module_cache__[moduleId]
  if (cachedModule !== undefined) return cachedModule.exports
  
  // 缓存内拿不到，则创建一个对象同时内部包含一个 exports 对象并存入到缓存内
  const module = __webpack_module_cache__[moduleId] = {
    exports: {}
  }
  
  // 接着通过执行 __webpack_modules__  中的moduleId对应函数并传入 module 对象
  // 通过函数内赋值 module.exports 获得 sum 函数
  __webpack_modules__[moduleId](module, module.exports, __webpack_require__)
  
  // 最后返回 module 中的 exports 对象
  return module.exports
}

(() => {
  // index.js 中的内容
  const sum = __webpack_require__(1)

  console.log(sum(1, 2))
})();

我们通过注释配合来解析一下

• 首先执行立即执行函数（L32）中的__webpack_require__函数，并传入moduleId 为 1
• 在__webpack_require__函数中尝试在__webpack_module_cache__中获取moduleId为 1 的模块（L16）
• 在__webpack_module_cache__中获取失败之后创建一个object，同时内部有属性exports = {}，并同时将其赋值给__webpack_module_cache__[moduleId]（L20）
• 执行对应的moduleId的函数__webpack_modules__[moduleId]，同时将module对象作为入参，在函数内将sum函数赋值给参数module.exports对象（L6），如此module.exports就是sum函数了
• 然后在__webpack_require__中返回 module.exports
• 执行完__webpack_require__(1)以后将其返回值赋值给sum（L34）
• 最后就可以调用sum函数了（L36）

到此这篇关于浅谈Webpack是如何打包CommonJS的的文章就介绍到这了,更多相关Webpack打包CommonJS内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！