首页 > 其他分享 >Webpack的plugin

Webpack的plugin

时间:2024-06-03 12:32:18浏览次数:23  
标签:函数 plugin 钩子 webpack Webpack apply compiler

plugin

loader的功能定位是转换代码,而一些其他的操作难以使用loader完成,比如:

  • 当webpack生成文件时,顺便多生成一个说明描述文件
  • 当webpack编译启动时,控制台输出一句话表示webpack启动了
  • 当xxxx时,xxxx

这种类似的功能需要把功能嵌入到webpack的编译流程中,而这种事情的实现是依托于plugin的

plugin的本质是一个带有apply方法的对象**

var plugin = {
    apply: function(compiler){
        
    }
}

通常,习惯上,我们会将该对象写成构造函数的模式

class MyPlugin{
    apply(compiler){

    }
}

var plugin = new MyPlugin();

要将插件应用到webpack,需要把插件对象配置到webpack的plugins数组中,如下:

module.exports = {
    plugins:[
        new MyPlugin()
    ]
}

apply函数会在初始化阶段,创建好Compiler对象后运行。

compiler对象是在初始化阶段构建的,整个webpack打包期间只有一个compiler对象,后续完成打包工作的是compiler对象内部创建的compilation

apply方法会在创建好compiler对象后调用,并向方法传入一个compiler对象

compiler对象提供了大量的钩子函数(hooks,可以理解为事件),plugin的开发者可以注册这些钩子函数,参与webpack编译和生成。

你可以在apply方法中使用下面的代码注册钩子函数:

class MyPlugin{
    apply(compiler){
        compiler.hooks.事件名称.事件类型(name, function(compilation){
            //事件处理函数
        })
    }
}

事件名称

即要监听的事件名,即钩子名,所有的钩子:https://www.webpackjs.com/api/compiler-hooks

事件类型

这一部分使用的是 Tapable API,这个小型的库是一个专门用于钩子函数监听的库。

它提供了一些事件类型:

  • tap:注册一个同步的钩子函数,函数运行完毕则表示事件处理结束
  • tapAsync:注册一个基于回调的异步的钩子函数,函数通过调用一个回调表示事件处理结束
  • tapPromise:注册一个基于Promise的异步的钩子函数,函数通过返回的Promise进入已决状态表示事件处理结束

处理函数

处理函数有一个事件参数compilation

标签:函数,plugin,钩子,webpack,Webpack,apply,compiler
From: https://www.cnblogs.com/bingquan1/p/18228604

相关文章

  • TS + Webpack 整合 Jest
    安装Jest和相关依赖首先,安装Jest和TypeScript的Jest预处理器ts-jest以及类型定义文件。npminstall--save-devjestts-jest@types/jest初始化Jest配置使用ts-jest初始化Jest配置文件。npxts-jestconfig:init这会生成一个基本的Jest配置文件jest.co......
  • AI UI developer by ChatGPT plugin:Tailwind CSS Builder
    AI网页UI开发工程师在ChatGPT插件市场中搜索TailwindCSSBuilder,对话可以直接生成基于tailwindcss的HTML网页:生成的网页结果:生成的网页源代码:点击查看代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport&q......
  • 【已解决】Swagger配置问题—Failed to start bean ‘documentationPluginsBootstrapp
    项目场景:swagger-demo编写SwaggerConfig.java后运行SwaggerDemoApplication.java不能成功问题描述ErrorstartingApplicationContext.Todisplaytheconditionsreportre-runyourapplicationwith'debug'enabled.org.springframework.context.ApplicationCont......
  • HarmonyOS实战开发:@ohos.pluginComponent (插件组件管理器)
    用于给插件组件的使用者请求组件与数据,使用者发送组件模板和数据。如需实现插件模板的显示,请参考PluginComponent。说明:本模块首批接口从APIVersion8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。导入模块importpluginComponentManagerfrom......
  • Python轻量级的插件框架库之pluginbase使用详解
    概要在软件开发中,插件系统是一个常见的需求。插件系统允许开发者动态加载和卸载功能模块,从而提高应用程序的灵活性和可扩展性。Python的pluginbase库是一个轻量级的插件框架,旨在简化插件系统的构建过程。pluginbase库提供了一套简单易用的API,使开发者能够快速集成插件功能。......
  • Typora Plugin
    目前支持的功能:序号插件功能1window_tab标签页管理2search_multi全局多关键字搜索3multi_highlighter多关键字高亮4collapse_paragraph章节折叠5collapse_list列表折叠6collapse_table表格折叠7md_padding中英文混排优化8slash......
  • Typora Plugin
    目前支持的功能:序号插件功能1window_tab标签页管理2search_multi全局多关键字搜索3multi_highlighter多关键字高亮4collapse_paragraph章节折叠5collapse_list列表折叠6collapse_table表格折叠7md_padding中英文混排优化8slash......
  • webpack基础学习
    作用就是一个静态模块打包工具,专门用来打包静态模块的概念入口(entry):入口起点,即构建的起始文件输出(output):构建输出的文件名和路径loader:webpack本身只能处理JavaScript和JSON文件,其他类型的文件交给loader来转换插件模式浏览器兼容性环境补充模块:在模块化编......
  • (读后分享)移动Web前端高效开发实战:HTML 5 + CSS 3 + JavaScript + Webpack + React Nat
    链接:pan.baidu.com/s/1tIHXj9HmIYojAHqje09DTA?pwd=jqso提取码:jqsoHTML5新特性与应用:介绍HTML5的新特性,包括语义化标签、本地存储、设备兼容、连接特性等,并讲解如何在移动Web前端开发中充分利用这些特性提升用户体验。CSS3样式与动画设计:详细讲解CSS3的样式设计和动画效果,包......
  • 说说webpack的热更新是如何做到的?原理是什么?
    一、是什么HMR全称 HotModuleReplacement,可以理解为模块热替换,指在应用程序运行过程中,替换、添加、删除模块,而无需重新刷新整个应用例如,我们在应用运行过程中修改了某个模块,通过自动刷新会导致整个应用的整体刷新,那页面中的状态信息都会丢失如果使用的是 HMR,就可以实现只......