利用webpack理解CommonJS和ES Modules的差异区别
前言
问:CommonJS和ESModules中模块引入的区别?
CommonJS输出的是一个值的拷贝;ESModules生成一个引用,等到真的需要用到时,再到模块里面去取值,模块里面的变量,绑定其所在的模块。
我相信很多人已经把这个答案背得滚瓜烂熟,好,那继续提问。
问:CommonJS输出的值是浅拷贝还是深拷贝?
问:你能模拟实现ESModules的引用生成吗?
对于以上两个问题,我也是感到一脸懵逼,好在有webpack的帮助,作为一个打包工具,它让ESModules,CommonJS的工作流程瞬间清晰明了。
准备工作
初始化项目,并安装beta版本的webpack5,它相较于webpack4做了许多优化:对ESModules的支持度更高,打包后的代码也更精简。
$mkdirdemo&&cddemo $yarninit-y $yarnaddwebpack@nextwebpack-cli #oryarnaddwebpack@5.0.0-beta.17webpack-cli
早在webpack4就已经引入了无配置的概念,既不需要提供webpack.config.js文件,它会默认以src/index.js为入口文件,生成打包后的main.js放置于dist文件夹中。
确保你拥有以下目录结构:
├──dist │└──index.html ├──src │└──index.js ├──package.json └──yarn.lock
在index.html中引入打包后的main.js:
Document