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

1,522 阅读2分钟

为什么会有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是一个美女;

iconType为 

  •  buddha是个佛祖; 
  •  giraffe是长颈鹿;
  •  poetry是一首诗;
  •  beauty是一个美女;

    const {handlerRunConfig,initRunIcon}=require('run-success-icon')
    plugins:[
    	 new FriendlyErrorsWebpackPlugin({
           // 运行成功
            compilationSuccessInfo:{
                //messages:[initRunIcon()],
                messages:[handlerRunConfig()],
                // notes:['有些附加说明要在成功编辑时显示']
            },
         })
        ],

使用之后的结果展示

1. 执行handlerRunConfig方法的结果:


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


最后

如果大家有新的想法可私聊我呀!一起开心的写代码,玩耍。代码仓库:https://github.com/hhl-web