react项目启动时候，显示启动进度条

前言：当我们做一个新的react项目时候，安装插件越多，启动越慢。如果没有一个进度条来显示目前项目启动进度，没有目的地等待是很让人着急的。因此，使用webpack进度显示插件非常有必要，下面就介绍两种常用的插件。

1、webpack-progress-ora-plugin

相信做过cli的人都比较熟悉ora插件，可以友好的提示cli进度以及当前所处的节点信息。webpack-progress-ora-plugin插件则是专门用来显示webpack编译进度的。

1.1、安装

npm install webpack-progress-ora-plugin -D

1.2、使用

在webpack配置文件中加入如下内容

const {WebpackProgressOraPlugin} = require('webpack-progress-ora-plugin');
.
.
.
plugins: [
	new WebpackProgressOraPlugin(),
]

重新启动项目就可以看到如下进度显示。

2、webpackbar

我是比较喜欢这一种，他更好看，antd-pro用的就是它。

2.1、安装

yarn add webpackbar -D

or

npm install webpackbar -D

2.2、使用

const WebpackBar = require('webpackbar');
 .
 .
 .
 plugins: [
    new WebpackBar()
  ]

然后，重新启动项目，就会看到如下进度显示界面。

大功告成，然后，就可以愉快的写代码了。从此，摆脱启动项目没有进度显示的问题。