通过开发一个去除注释的插件来熟悉webpack插件机制


前言

相比于loader,插件的能力范围更广,因为Loader只是在模块的加载环节工作,而插件的作用范围几乎可以触及webpack工作的每一个环节。
webpack的插件机制就是我们软件开发中最常见的钩子机制。
在webpack整个工作工程中会有很多环节,为了便于插件的扩展,Webpack几乎在每一个环节都埋下了一个钩子。这样我们在开发插件的时候,通过往这些钩子上挂载不同的任务,就可以轻松扩展Webpack的能力。
如下图所示:
通过开发一个去除注释的插件来熟悉webpack插件机制
下面我们通过开发一个插件来了解如何往这些钩子上挂载任务从而熟悉webpack的插件机制的实现。

需求

开发一个插件能够去除打包后代码的注释
通过开发一个去除注释的插件来熟悉webpack插件机制

插件开发

目录结构如下:
通过开发一个去除注释的插件来熟悉webpack插件机制
Webpack要求我们的插件必须是一个函数或者是一个包含apply方法的对象,这里我们定义一个类型,这个类型中定义一个apply方法。
通过开发一个去除注释的插件来熟悉webpack插件机制

上面将插件的大体结构写好了,下面我们就需要考虑将任务挂载到哪个钩子上?
通过查阅API文档,我们知道有一个emit的钩子,这个钩子会在Webpack即将向输出目录输出文件时执行,这符合我们的需求。
通过开发一个去除注释的插件来熟悉webpack插件机制
通过开发一个去除注释的插件来熟悉webpack插件机制
通过开发一个去除注释的插件来熟悉webpack插件机制

经过查阅资料我们知道,compilation.assets[name].source()可以输出文件的内容,能拿到文件名和文件内容接下来的任务就是判断文件名是不是.js结尾以及去除注释的逻辑
通过开发一个去除注释的插件来熟悉webpack插件机制
构建结果如下:
通过开发一个去除注释的插件来熟悉webpack插件机制

总结

webpack插件机制就是在它特定的钩子里挂载特定的任务,也就是我们熟悉的AOP(面向切面编程)

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

通过开发一个去除注释的插件来熟悉webpack插件机制

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 通过开发一个去除注释的插件来熟悉webpack插件机制
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏