利用webpack理解CommonJS和ESModules的差异区别_vite和webpack - CSDN文库

53 浏览量更新于2023-03-16 评论收藏 98KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

利用利用webpack理解理解CommonJS和和ES Modules的差异区别的差异区别

前言前言

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

CommonJS 输出的是一个值的拷贝；ES Modules 生成一个引用，等到真的需要用到时，再到模块里面去取值，模块里面的

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

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

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

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

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

工作流程瞬间清晰明了。

准备工作准备工作

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

代码也更精简。

$ mkdir demo && cd demo

$ yarn init -y

$ yarn add webpack@next webpack-cli

# or yarn add webpack@5.0.0-beta.17 webpack-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：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Document</title>

</head>

<body>

<script src="main.js"></script>

</body>

</html>

在 package.json 中添加命令脚本：

"scripts": {

"start": "webpack"

},

运行无配置打包：

$ yarn start

终端会提示：

WARNING in configuration

The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to

‘development’ or ‘production’ to enable defaults for each environment.

You can also set it to ‘none’ to disable any default behavior. Learn more:

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余5页未读，立即下载

评论0

weixin_38717579

粉丝: 2
资源: 887

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈