控制webpack的编译进度输出 - Laravel MixEnvoy!

Question

使用以下命令 npm run development 通过Laravel Envoy, 使得每一行输出回来都会在控制台中做出几百行这样的内容:

[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

有什么办法可以把进度输出减少到只有几行?

Answer 1

这里有几件事情需要了解:

• 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如何工作