如何通过Webpack深入理解CommonJS与ES Modules的深层差异及其应用场景？

本文共计2682个文字，预计阅读时间需要11分钟。

前言：问：CommonJS 和 ES Modules 中模块引入的区别？

答：CommonJS 输出的是一个值的拷贝；ES Modules 生成一个引用，等到真正需要用到时，再到模块里去取值，模块里的变量，绑定了其所在的模块。

模块里的变量，绑定其所在的模块。

前言

问： CommonJS 和 ES Modules 中模块引入的区别？

CommonJS 输出的是一个值的拷贝；ES Modules 生成一个引用，等到真的需要用到时，再到模块里面去取值，模块里面的变量，绑定其所在的模块。

我相信很多人已经把这个答案背得滚瓜烂熟，好，那继续提问。

问：CommonJS 输出的值是浅拷贝还是深拷贝？

问：你能模拟实现 ES Modules 的引用生成吗？

对于以上两个问题，我也是感到一脸懵逼，好在有 webpack 的帮助，作为一个打包工具，它让 ES Modules, CommonJS 的工作流程瞬间清晰明了。

准备工作

初始化项目，并安装 beta 版本的 webpack 5，它相较于 webpack 4 做了许多优化：对 ES Modules 的支持度更高，打包后的代码也更精简。