webpack项目:基于friendly-errors-webpack-plugin插件运行之自动生成各种优雅图标的插件

为什么会有run-success-icon插件

之前看后端同事在运行以Spring Boot框架的项目时会自动生成一些优雅并且好玩的小图标,感觉好玩~~所以就想前端是否也能在项目运行成功之后生成如此优雅的小图案呢,于是有了run-success-icon这个插件。

run-success-icon插件的使用背景

run-success-icon插件与friend -error - webpack
-plugin插件配套使用可实现当项目成功运行时,允许出现不同有趣的小图标。

run-success-icon的使用配置

  1. npm i run-success-icon friend -error - webpack
    -plugin --save 敲下命令行即可在项目当中使用它了。
  2. 如何配置这个插件
    下载成功之后,可在开发环境下的webpack配置下引入run-success-icon和friend -error - webpack
    run-success-icon提供2个方法:handlerRunConfig和initRunIcon;handlerRunConfig主要是解决用户自行配置文件夹传入图案,initRunIcon主要是用来通过参数生成图案。
    handlerRunConfig方法:
    在项目新建一个配置文件夹=》runIconConfig,将图案放入即可。
    如下图:
    在这里插入图片描述
    initRunIcon方法:
    主要是通过传参的形式实现图案:默认不传生成佛祖。
    iconType为
    buddha是个佛祖;
    giraffe是长颈鹿;
    poetry是一首诗;
    beauty是一个美女;
//在webpack开发配置
const {handlerRunConfig,initRunIcon}=require('run-success-icon')
plugins:[
	 new FriendlyErrorsWebpackPlugin({
       // 运行成功
        compilationSuccessInfo:{
            //messages:[initRunIcon()],
            messages:[handlerRunConfig()],
            // notes:['有些附加说明要在成功编辑时显示']
        },
     })
    ],

使用之后的结果展示

  1. 执行handlerRunConfig方法的结果:

在这里插入图片描述

  1. 执行initRunIcon方法的结果, 默认不传参数的结果,其他传参结果自行玩呀~~

在这里插入图片描述

最后

如果大家有新的想法可私聊我呀!一起开心的写代码玩耍GitHub。觉得还行支持的话就给我一个小小的鼓励,给我点个赞哈~~

  • 6
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值