webpack 编译时样式美化
![作者站长头像](https://img.blogweb.cn/avatar/cc788e24a17249d0a8aa6d4567a5460f.webp)
原本想更新在上一篇文章(webpack配置react)中,但是篇幅又有点过长,所以就单独写一篇文章。 我一般都是用脚手架创建react或者vue项目的,在项目跑起来或者编译的时候都会有加载的效果,进度啥的。如
对比下没有添加特效的,如
差别还是挺大的,尤其是我之前一直是用脚手架去搭项目,突然看到这种还是有点不适应的,有时候甚至都不确定是否编译完全。不过也有人喜欢这种不加修饰的,因人而异吧,那么接下来看看怎么实现的。
webpack内置插件ProgressPlugin
因为是内置的,所以直接在webpack中引入就行
const { ProgressPlugin } = require('webpack')
ProgressPlugin包含一个对象ProgressPlugin({}); 结合我们上一篇写的在webpack.config.base.js中
const { ProgressPlugin } = require('webpack');
const handler = (percentage, message, ...args) => {
// precentage 表示编译的百分比
// message就是webpack打包时想告诉我们的消息
// ...args就是一些其他消息
console.info(percentage, message, ...args);
};
在plugin中加入ProgressPlugin这个配置
new ProgressPlugin({
handler
})
配置完就是这样的效果
当然大家可以加一点修饰,console.log()中可以搞个备注啥的,例如
const handler = (percentage, message, ...args) => {
console.info('进度'+percentage, '处理模块'+message, ...args);
};
比原来的好一点。但是ProgressPlugin配置不只是handler这一个,还有其他配置,如果想要了解可以看webpack官网。webpack.docschina.org/plugins/pro…
WebpackBar美化
先安装WebpackBar,这个包还是很多人在用的
yarn add webpackbar
然后在webpack.config.base.js中
const WebpackBar = require('webpackbar');
plugins: [
new WebpackBar({
name: '张三王五', // 默认为webpack,可以更改
color: "black", // 进度条的颜色,可以自己设置
basic: false, // 默认为false,启用一个简单的日志报告器
// reports: [], //默认为[]自定义配置相当于,设置了这个,其他就会失效
})
]
效果
自定义配置reports,如果大家感兴趣可以去试试看,这是包的地址www.npmjs.com/package/web…
细心的朋友肯定发现了,打包结束还没有优化,还是这个样子
这时候就需要这个插件了
friendly-errors-webpack-plugin
首先下载这个包
yarn add friendly-errors-webpack-plugin
然后在webpack.config.base.js中
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
plugins: [new FriendlyErrorsWebpackPlugin({
compilationSuccessInfo: {
messages: ['张三王五跑起来 http://localhost:5555']
},
})]
如图
效果是有了,但是下面这些信息还是需要删掉,在webpack5,我们需要在webpack.config.base.js配置的对外层加stats: 'errors-only'
,webpack5之前好像是在devServer中添加quit: false.
最后项目yarn start一下
这下控制台干净了,不过这也是最基础的配置。就是不知道配置这些会不会对编译速度变慢,所以我也就配置了一些基础的内容。
总结
编译样式美化算是弄完了,这些其实网上都可以搜的到,但是这也是我使用webpack必走的一条路,所以记录下来。原本想着是写在上一篇,但是篇幅有点长,所以另起一篇。希望在记录的同时可以帮助到大家,如果文章中有什么错误,都可以评论让我改正。
掘友建议
- 评论区有掘友说到的friendly-errors-webpack-plugin这个包已经5年没更新了。正常使用是没啥问题,但是建议使用
@nuxt/friendly-errors-webpack-plugin
,毕竟一直更新的包,可能存在的bug会少一点,大家可以试试看。然后就是这个包使用方式和文章中写的一样,没啥不同。但是大家引入的时候是const FriendlyErrorsWebpackPlugin = require('@nuxt/friendly-errors-webpack-plugin');
。其他的就没啥了,如果大家想进一步配置访问这个github.com/nuxt/friend… 或npm www.npmjs.com/package/@nu… 再提一点,webpack记得在最外层使用stats: 'errors-only'
这个配置是只有发生错误的时候输出,如果不配置,编译完成之后会把其他信息输出在最后。