webpack模块化的原理是什么(webpack,开发技术)

在webpack中既可以书写commonjs模块也可以书写es模块，而且不用考虑浏览器的兼容性问题，我们来分析一下原理。

首先搞清楚commonjs模块化的处理方式，简单配置一下webpack，写两个模块编译一下看一下：

webpack.config.js

index.js

a.js

查看编译结果，可以发现webpack对于每个模块的做法类似于node，将每个模块放在一个函数环境中并向其中传入一些必要的参数。webpack将这些模块组成一个对象（属性名是模块路径(模块id)，属性值为模块内容）传入一个立即执行函数，立即执行函数中定义了一个函数 __webpack_require__类似node中的require函数，实现了导入模块的作用。

打包结果中删去了一些注释和暂时用不要的代码，可以很明显的看出来实现commonjs模块化的关键就是这个 __webpack_require__ 函数，通过传入模块id来得到模块的导出。

__webpack_require__ 函数的实现：

如果熟悉node就很容易理解这个函数了：

首先查看这个模块是否已经被加载过，所以就需要一个全局变量installedModules用来记录所有被加载过模块的导出

没有加载过的模块就先构造一个module对象，关键是要有一个exports属性

执行模块代码并返回模块导出值

最终的一步就是需要加载启动模块，也就是IIFE的最后一句：

es 模块化的处理方式是需要借助 __webpack_require__ 实现的，首先看一些刚才被删除的代码：

该函数用于标识es模块的导出

用于处理es模块的具名导出

就是给 hasOwnPreperty 换了个名字

我们改一下模块代码看看纯es Module导入导出的编译结果：

index.js

a.js

b.js

参考资料 前端进阶面试题详细解答

根据编译结果可以很明白的看出来，和 commonjs 编译出来的结果差不多，核心都是使用 __webpack_require__ 函数，区别在于es模块化，exports 对象首先就会被__webpack_require__.r标记为es module，对于默认导出就是 exports 的 default 属性，对于具名导出使用 __webpack_require__.d 包装了一下，目的是让这些具名导出在模块之外只能读不能被修改（这是es module的特点）。

但是为什么 default 没有被__webpack_require__.d 处理，这不合理啊。本来是使用的 webpack 4打包的，然后换了webpack 5试了一下，webpack 5打包的结果中 default 也被处理了，这可能是webpack 4的一个小bug吧。

webpack5的编译结果有些许的不同，但是整个逻辑是没有变的：

webpack 是支持两种模块化代码共存的，虽然不建议这样做。首先我们先看一下他们互相导入的时候的导入结果是什么样的：

我们来看看 webpack 是如何实现的，先修改一下模块：

index.js

a.js

b.js

可以发现当通过es模块的方式去 import 一个commonjs模块时，就会把导入的模块进行一层包装，通过 __webpack_require__.n，主要目的应该是为了兼容 import * as obj from '....' 这样的语法。

该函数的具体实现：