-
准备工作
两个文件，分别使用CommonJS和ES Module导出方法如下图： -
初识
应为说到模块化原理需要用到modemode属性所以这里简单认识一下mode通过选择
development,production或none之中的一个，来设置mode参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为production
三者之间的区别：默认情况下是
production所以打包后的文件是被压缩丑化之后的代码如下图：不便于我们进行源码探索，所以此时可以切换成
development模式打包成功的代码如下：这样就方便我们阅读源码
-
写一个简单的文件使用CommonJS模块化实现原理CommonJS引入方法然后调用，最后将打包的入口文件改成该文件:可以看到如下：
此时删除所有注释，空格最后格式化后代码如下：
从源码最外层可以看出最外层包裹一个立即执行函数，代码块里面也存在者一些立即执行函数，下一步将所有的立即执行函数删掉再看源码：
源码注释如下：
具体流程图如下：
-
准备工作如上，创建一个用ES Module模块化实现原理ES Module导出的文件，并且创建一个文件然后使用ES Module引入，然后打包稿文件，删除对应的注释和格式化后代码如下：具体流程如下：
-
这里的原理和CommonJS加载ES Module的原理ES Module原理基本相同，无非在调用方法的时候使用了结构的方式取到方法，而ES Module是通过对象调用属性的方式调用方法，具体源码如下: -
这里和ES Module加载CommonJS的原理CommonJS差不多相同，基本上是使用CommonJS原理去实现，在最后调用的时候不在是使用解构的方式，而是通过属性调用的方式具体源码如下：
