Webpack配置-模块化原理

• 准备工做

  两个文件，分别使用 CommonJS和ES Module导出方法以下图：

• 初识mode

  应为说到模块化原理须要用到 mode属性因此这里简单认识一下 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原理去实现，在最后调用的时候不在是使用解构的方式，而是经过属性调用的方式具体源码以下：