控制webpack编译进度输出 - Laravel Mix/Envoy
Control webpack compilation progress output - Laravel Mix/Envoy
通过 Laravel Envoy 使用像 npm run development
这样的命令,使每一行都输出回来,在控制台中像这样生成数百行:
[remote@server]: <s> [webpack.Progress] 65% building 145/150 modules 5 active /home/remote/example.com/node_modules/date-fns/sub_years/index.js
[remote@server]: <s> [webpack.Progress] 65% building 146/150 modules 4 active /home/remote/example.com/node_modules/date-fns/sub_years/index.js
[remote@server]: <s> [webpack.Progress] 65% building 147/150 modules 3 active /home/remote/example.com/node_modules/date-fns/sub_years/index.js
[remote@server]: <s> [webpack.Progress] 65% building 147/151 modules 4 active /home/remote/example.com/node_modules/array-includes/index.js
[remote@server]: <s> [webpack.Progress] 65% building 148/151 modules 3 active /home/remote/example.com/node_modules/array-includes/index.js
[remote@server]: <s> [webpack.Progress] 65% building 148/152 modules 4 active /home/remote/example.com/node_modules/vue-google-charts/index.js
[remote@server]: <s> [webpack.Progress] 65% building 148/153 modules 5 active /home/remote/example.com/node_modules/@deveodk/vue-toastr/dist/@deveodk/vue-toastr.js
[remote@server]: <s> [webpack.Progress] 65% building 148/154 modules 6 active /home/remote/example.com/node_modules/pluralize/pluralize.js
[remote@server]: <s> [webpack.Progress] 65% building 148/155 modules 7 active /home/remote/example.com/node_modules/vue-js-modal/dist/index.js
[remote@server]: <s> [webpack.Progress] 65% building 148/156 modules 8 active /home/remote/example.com/node_modules/vuex/dist/vuex.esm.js
有没有办法将进度输出减少到只有几行?
这里有几件事需要理解:
- package.json 包含像
npm run development
、npm run production
这样的 npm 命令
- 下面是其中一个的样子:
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
- 进度输出由上述命令中的
--progress
参数启动
- 进度输出正在后台使用ProgressPlugin
想法是从命令中删除 --progress
参数,使其看起来像
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
但要像这样手动将其实例化为插件,在 webpack.mix.js
:
mix.webpackConfig({
plugins: [
new webpack.ProgressPlugin((percentage, message) => {
// An idea to show the line only if percentage is divisible by 5.
if (percentage * 100 % 5 === 0) {
console.log(`${(percentage * 100).toFixed()}% ${message}`);
}
})
],
});
修改后的输出如下所示:
0% compiling
10% building
10% building
25% building
40% building
40% building
70% building
70% building
70% finish module graph
70% finish module graph
75% module optimization
70% building
70% building
80% chunk modules optimization
85% chunk reviving
85% chunk reviving
95% emitting
95% emitting
思路借鉴这篇解释how ProgressPlugin works
通过 Laravel Envoy 使用像 npm run development
这样的命令,使每一行都输出回来,在控制台中像这样生成数百行:
[remote@server]: <s> [webpack.Progress] 65% building 145/150 modules 5 active /home/remote/example.com/node_modules/date-fns/sub_years/index.js
[remote@server]: <s> [webpack.Progress] 65% building 146/150 modules 4 active /home/remote/example.com/node_modules/date-fns/sub_years/index.js
[remote@server]: <s> [webpack.Progress] 65% building 147/150 modules 3 active /home/remote/example.com/node_modules/date-fns/sub_years/index.js
[remote@server]: <s> [webpack.Progress] 65% building 147/151 modules 4 active /home/remote/example.com/node_modules/array-includes/index.js
[remote@server]: <s> [webpack.Progress] 65% building 148/151 modules 3 active /home/remote/example.com/node_modules/array-includes/index.js
[remote@server]: <s> [webpack.Progress] 65% building 148/152 modules 4 active /home/remote/example.com/node_modules/vue-google-charts/index.js
[remote@server]: <s> [webpack.Progress] 65% building 148/153 modules 5 active /home/remote/example.com/node_modules/@deveodk/vue-toastr/dist/@deveodk/vue-toastr.js
[remote@server]: <s> [webpack.Progress] 65% building 148/154 modules 6 active /home/remote/example.com/node_modules/pluralize/pluralize.js
[remote@server]: <s> [webpack.Progress] 65% building 148/155 modules 7 active /home/remote/example.com/node_modules/vue-js-modal/dist/index.js
[remote@server]: <s> [webpack.Progress] 65% building 148/156 modules 8 active /home/remote/example.com/node_modules/vuex/dist/vuex.esm.js
有没有办法将进度输出减少到只有几行?
这里有几件事需要理解:
- package.json 包含像
npm run development
、npm run production
这样的 npm 命令
- 下面是其中一个的样子:
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
- 进度输出由上述命令中的
--progress
参数启动 - 进度输出正在后台使用ProgressPlugin
想法是从命令中删除 --progress
参数,使其看起来像
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
但要像这样手动将其实例化为插件,在 webpack.mix.js
:
mix.webpackConfig({
plugins: [
new webpack.ProgressPlugin((percentage, message) => {
// An idea to show the line only if percentage is divisible by 5.
if (percentage * 100 % 5 === 0) {
console.log(`${(percentage * 100).toFixed()}% ${message}`);
}
})
],
});
修改后的输出如下所示:
0% compiling
10% building
10% building
25% building
40% building
40% building
70% building
70% building
70% finish module graph
70% finish module graph
75% module optimization
70% building
70% building
80% chunk modules optimization
85% chunk reviving
85% chunk reviving
95% emitting
95% emitting
思路借鉴这篇解释how ProgressPlugin works