Webpack配置-模块化原理

496 阅读2分钟
  • 准备工作

    两个文件,分别使用 CommonJSES Module导出方法如下图: image.png
  • 初识mode

    应为说到模块化原理需要用到 mode属性所以这里简单认识一下 mode

    通过选择 developmentproduction 或 none 之中的一个,来设置 mode 参数,你可以启用 webpack 内置在相应环境下的优化。其默认值为 production
    三者之间的区别: image.png 默认情况下是 production所以打包后的文件是被压缩丑化之后的代码如下图: image.png不便于我们进行源码探索,所以此时可以切换成 development模式打包成功的代码如下: image.png这样就方便我们阅读源码

  • CommonJS模块化实现原理

    写一个简单的文件使用 CommonJS引入方法然后调用,最后将打包的入口文件改成该文件: image.png 可以看到如下: image.png 此时删除所有注释,空格最后格式化后代码如下: image.png 从源码最外层可以看出最外层包裹一个立即执行函数,代码块里面也存在者一些立即执行函数,下一步将所有的立即执行函数删掉再看源码: image.png源码注释如下: image.png 具体流程图如下: commonjs原理.jpg
  • ES Module模块化实现原理

    准备工作如上,创建一个用ES Module导出的文件,并且创建一个文件然后使用ES Module引入,然后打包稿文件,删除对应的注释和格式化后代码如下: image.png 具体流程如下: esmodule.jpg
  • CommonJS加载ES Module的原理

    这里的原理和 ES Module原理基本相同,无非在调用方法的时候使用了结构的方式取到方法,而ES Module是通过对象调用属性的方式调用方法,具体源码如下: 2021-08-10_17-15-24.png
  • ES Module加载CommonJS的原理

    这里和CommonJS差不多相同,基本上是使用CommonJS原理去实现,在最后调用的时候不在是使用解构的方式,而是通过属性调用的方式具体源码如下: image.png