laravel - 控制 webpack 编译进度输出 - 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 命令,例如
npm run development
,npm run production
- 以下是其中之一的样子:
"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
这个想法是从这篇解释ProgressPlugin 如何工作的文章中借来的
推荐阅读
- python-3.x - 突出显示 Plotly 热图单元格或更改 Plotly 中特定热图单元格的颜色
- drupal-7 - Drupal 中“文章”结构化数据的正确方法
- promise - 为什么没有显示 dexie 承诺解决方案中的错误?
- java - 如何打印和加载带有随机数的数组
- aws-lambda - 如何在 AWS lambdas 中保持状态?
- swift - 删除 Swift 5 中的转义“\”字符
- javascript - 我需要使用 JavaScript 或 HTML 链接到当前 HTML 页面中的另一个 HTML 页面
- apache - 基于健康检查 URL 的热备故障转移 Apache 模块
- python - python:MTCNN 没有保存所有文件
- java - getDeclaredMethods() + 创建数组 = 额外方法?