webpack从0到手写webpack_02

本文揭示了Webpack的本质——模块打包工具,它不仅能处理ESModule,还包括CommonJS、CMD、AMD等多种模块规范,并扩展至Vue、React等项目中的CSS和图片打包。理解它作为全面的模块解决方案而非单纯翻译器至关重要。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

webpack从0到1——02

Bundler:模块打包工具

看完了上一篇:[https://blog.youkuaiyun.com/frontendchen/article/details/109724243]
可能很多人认为webpack就是一个js的翻译器,对不起,大家千万不要被眼前的东西所蒙蔽,webpack实际上称不上一个翻译器,以为它
只认识import这样的语句,其它高级的JS语法它一概不认,你把它称作js翻译器实际上是高看了它
如果我们打开google输入webpack,可以看到结构是webpack 是一个模块打包器

在这里插入图片描述
像 import引入的这些文件我们都可以把它们看作模块,webpack就是一个把他们打包到一起的模块打包工具
在这里插入图片描述
大家知道在我们写js代码的时候不仅有es module这样的代码规范,实际上还有CommonJS,CMD,AMD等规范
webpack对这样规范下的代码一样可以识别,以CommonJs为例
我们使用require的方式导入模块
在这里插入图片描述
三个模块的模块的导出也要对应修改
在这里插入图片描述
这样的话,我们每个模块通过CommonJS的方式导出,在index.js中,我们又通过CommonJs的方式引入进来,webpack是一个模块打包工具,它能够识别任何模块引入的语法所以这种语法它也能正常的帮我们进行翻译。我们将dist文件夹删除,进行重新打印,同样生成了dist目录,index.html打开内容正常显示
在这里插入图片描述
这一篇的重点讲的是webpack其实是一个模块打包工具并不是js翻译器
最早的时候webpack是一个js的模块打包工具,后来随着webpack的发展,webpack能打包的文件不仅仅是js文件,它还可以打包其它任何形式的模块文件
比如说我们vue或react的项目的时候,引入过一些css样式文件。它还能打包png,jpg类型的图片文件等等。所以webpack准确定义就是一个模块打包工具

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值