webpack添加进度提示

在命令行中可以添加–progress选项显示webpack的编译进度,但是使用webpack的api如何显示编译进度的,在这里做一个笔记。

在这里主要是使用webpack的ProgressPlugin插件可以完成这个功能.

当然如果使用console.log去打印进度的话会打印很多行,看着很凌乱,所以使用ora这个库去优化打印信息,好吧下面看代码吧。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var ora = require('ora')
var webpack = require('webpack')
var webpackConfig = require('./webpack.prod.conf')
var ProgressPlugin = require('webpack/lib/ProgressPlugin');
var spinner = ora({
text: 'building for production...',
spinner: "moon"
})
spinner.start()
// 编译器实例
var compiler = webpack(webpackConfig)
// 显示编译进度
compiler.apply(new ProgressPlugin(function (percentage, msg, modules) {
spinner.text = `${(percentage * 100).toFixed(2)}% --- ${msg} --- ${modules}`
}))
// 启动编译
new Promise(function (resolve, reject) {
compiler.run(function (err, stats) {
if (err) {
return reject(err)
} else {
resolve()
}
// 显示编译结果
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\r\n')
})
}).then(() => {
spinner.succeed('编译完成!')
}).catch((err) => {
spinner.fail(err)
})