Appearance
webpack 编译时样式美化
对比下没有添加特效的,如
差别还是挺大的,尤其是我之前一直是用脚手架去搭项目,突然看到这种还是有点不适应的,有时候甚至都不确定是否编译完全。不过也有人喜欢这种不加修饰的,因人而异吧,那么接下来看看怎么实现的。
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必走的一条路,所以记录下来。原本想着是写在上一篇,但是篇幅有点长,所以另起一篇。希望在记录的同时可以帮助到大家,如果文章中有什么错误,都可以评论让我改正。