文章中就不具体解释什么是 “CommonJs” 与 “EsModule” 了，我们先简单的描述一下 “CommonJs” 与 “EsModule” 的区别。

它们有三个重大差异。

因为在 Webpack 中是支持这两种模块加载方式的，所以接下来我们就通过 Webpack 并结合 Demo 来具体解释一下这三个差异。

对 Webpack 不熟的童鞋可以看一下我的这篇文章：来和 webpack 谈场恋爱吧

我们先创建一个 module-demo 目录，然后执行 npm 的初始化：

在 module-demo 目录下执行以下命令：

在 module-demo 项目根目录下创建一个 webpack.config.js 文件：

然后将以下内容写入到 module-demo/webpack.config.js 文件：

Webpack 的配置就不详细介绍了，感谢的小伙伴可以看一下我的这篇文章：来和 webpack 谈场恋爱吧

在 module-demo 项目根目录下创建一个 src 目录：

并在 module-demo/src 目录下创建一个 index.js 文件，用来作为我们 webpack 打包的入口文件：

我们可以试着在 module-demo 项目根目录下执行以下命令进行 webpack 打包命令测试：

可以看到，在项目的 module-demo/dist 目录下生成了一个 main.js 文件，main.js 文件就是我们通过 webpack 打包出来的资源文件。

ok，到这我们的准备工作就结束啦！

CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。

我们在 module-demo/src 目录下创建一个 commonjs 目录，用来存放 commonjs 模块：

然后在 src/commonjs 目录下创建一个 lib.js 文件：

接着将以下内容写入到 src/commonjs/lib.js 文件：

上面代码输出内部变量counter和改写这个变量的内部方法incCounter。

然后我们在src/index.js里面加载这个模块：

最后我们在 module-demo 根目录下执行 webpack 打包命令：

等打包完成后，我们运行一下 webpack 打包过后的 dist/main.js 文件：

可以看到，两次 console.log 打印的都是 3，我们调用了 incCounter 方法后，counter 并没有改变，这是为什么呢？

我们看一下打包过后的 dist/main.js 文件：

当我们执行 node ./dist/main.js 命令的时候，最先执行了这段代码：

也就是我们的入口文件 src/index.js 文件：

当我们用 require 导入 ./commonjs/lib 模块的时候，webpack 最后会编译成这样：

ok，我们看一下dist/main.js 文件中的 __webpack_require__ 方法：

可以看到，在 __webpack_require__ 方法中，首先是去缓存中找这个模块，如果缓存中没有该模块的话，就会新创建一个模块，然后执行这个模块，最后导出这个模块。

我们重点看一下执行该模块的代码：

__webpack_modules__ 其实就是一个模块数组，用来存放我们源文件中的所有模块信息：

可以看到，我们当前 demo 中有两个模块 src/index.js 与 src/commonjs/lib.js，因为 src/index.js 没有导出任何模块信息，所以 __webpack_modules__ 数组的第一个子项为 undefined，当我们执行：

代码的时候，我们传递进来的是 1：

所以最后会执行 __webpack_modules__ 数组的第 1 项内容，也就是我们的 src/commonjs/lib.js 模块：