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准确定义就是一个模块打包工具

手写一个webpack插件,你可以按照以下步骤进行操作: 1. 首先,了解webpack自身插件的调用流程。你可以参考webpack内部插件的实现方式来理解。其中一个例子是NodeEnvironmentPlugin插件。 2. 创建一个新的插件文件,比如TestPlugin.js,并在文件中定义一个插件类,比如TestPlugin。 3. 在插件类中使用tapable实例的方法,在webpack的emit钩子函数执行时触发我们定义的函数。你可以使用compiler.hooks.emit.tap方法来绑定钩子函数。 4. 在钩子函数内部,使用compiler.outputFileSystem.writeFile方法创建一个自定义的文件,并在文件中写入你想要的内容。比如你可以写入一句话,如"//我们的第一个webpack插件!"。 5. 在webpack配置文件中引入你的插件,并将它作为一个实例加入到plugins数组中。 以下是一个示例的webpack配置文件,展示了如何引入TestPlugin插件: ``` const path = require('path'); const TestPlugin = require('./TestPlugin'); module.exports = function() { return { mode: 'development', entry: ['./src/app.js'], output: { path: path.join(__dirname, 'out'), filename: 'out.[name].js' }, plugins: [ new TestPlugin() ] }; }; ``` 通过以上步骤,你就可以手写一个简单的webpack插件了。这个插件会在webpack输出的文件夹中创建一个自定义的文件,并在文件中写入一句话。你可以根据自己的需求,进一步扩展和定制插件的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值