As for webpack to organize a beautiful build(progress bar, etc.)?

Hi, starting a new project and want razgrebsti chaos in the Assembly - to make ProgressBar with interest, for example, as nuxt
It was too much spam going to the console.
Here is my current config webpage:
spoiler
const path = require('path')
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = {
 mode: 'production',
 entry: './resources/js/entry-client.js',
 output: {
 path: path.resolve(__dirname, './public/dist'),
 publicPath: '/public/dist/',
 filename: 'build.js'
},
 optimization: {
 minimize: true
},
 module: {
 rules: [{
 test: /\.vue$/,
 loader: 'vue-loader',
 }, {
 test: /\.css$/,
 use: [
MiniCssExtractPlugin.loader
'css-loader',
]
 }, {
 test: /\.scss$/,
 use: [
MiniCssExtractPlugin.loader
'css-loader',
'sass-loader'
]
 }, {
 test: /\.js$/,
 loader: 'babel-loader',
 exclude: /node_modules/
}]
},
 plugins: [
 new VueLoaderPlugin(),
 new webpack.DefinePlugin({
 'process.env': {
 NODE_ENV: 'production'
}
}),
 new MiniCssExtractPlugin({
 filename: "build.css"
}),
]
}

And there is so much information falls into the console:
spoiler
/usr/local/bin/node /usr/local/lib/node_modules/npm/bin/npm-cli.js run start --scripts-prepend-node-path=auto

> @ start /Users/user/Documents/laravel-vue
> npm-run-all --parallel build:client build:server server


> @ server /Users/user/Documents/laravel-vue
> node ./server.js


> @ build:client /Users/user/Documents/laravel-vue
> cross-env NODE_ENV=development webpack --progress --hide-modules --watch


> @ build:server /Users/user/Documents/laravel-vue
> cross-env NODE_ENV=development webpack --config webpack.server.config.js --progress --hide-modules --watch

 10% building modules 0/0 0 active
webpack is watching the files...

(node:13579) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
 10% of the building modules 1 active 0/1 ...aravel-vue/resources/js/entry-server.js 10% building modules 0/0 0 active
webpack is watching the files...

 11% building 2 12/14 modules active ...ade Hash: f0ed0cf4843e6f595453
Version: webpack 4.29.6
Time: 1431ms
Built at: 03/28/2019 1:12:16 PM
 Asset Size Chunks Chunk Names
vue-ssr-bundle.json 61.5 KiB [emitted] 
Entrypoint main = build.css build.js
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/vue-loader/lib/loaders/stylePostLoader.js!node_modules/sass-loader/lib/loader.js!node_modules/vue-loader/lib/index.js??vue-loader-options!resources/js/App.vue?vue&type=style&index=0&lang=scss&:
 Entrypoint mini-css-extract-plugin = *
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/vue-loader/lib/loaders/stylePostLoader.js!node_modules/sass-loader/lib/loader.js!node_modules/vue-loader/lib/index.js??vue-loader-options!resources/js/admin/lrl-panel.vue?vue&type=style&index=0&id=17f2c3cf&lang=scss&scoped=true&:
 Entrypoint mini-css-extract-plugin = *
Hash: 233210d1ff9337eb97ae
Version: webpack 4.29.6
Time: 1790ms
Built at: 03/28/2019 1:12:17 PM
 Asset Size Chunks Chunk Names
build.css 521 bytes 0 [emitted] main
 build.js 118 KiB 0 [emitted] main
Entrypoint main = build.css build.js
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/vue-loader/lib/loaders/stylePostLoader.js!node_modules/sass-loader/lib/loader.js!node_modules/vue-loader/lib/index.js??vue-loader-options!resources/js/App.vue?vue&type=style&index=0&lang=scss&:
 Entrypoint mini-css-extract-plugin = *
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/vue-loader/lib/loaders/stylePostLoader.js!node_modules/sass-loader/lib/loader.js!node_modules/vue-loader/lib/index.js??vue-loader-options!resources/js/admin/lrl-panel.vue?vue&type=style&index=0&id=17f2c3cf&lang=scss&scoped=true&:
 Entrypoint mini-css-extract-plugin = *


I have tried progress-bar-webpack-plugin and webpackbar but I still could not set them up nicely.

Maybe someone has something to tell, or someone will share a guide?
Thank you!
March 19th 20 at 09:00
1 answer
March 19th 20 at 09:02
Solution
Well, first, You have 3 processes working in parallel and throw it all in the common stdout, of course there will be a mess...
Second, here is an outdated plugin, I do not know whether new, but still:
(node:13579) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
10% of the building modules 1 active 0/1 ...aravel-vue/resources/js/entry-server.js 10% building modules 0/0 0 active
webpack is watching the files...


So, to start run 2 assemblies in the same process, and at the same time, and take control of the compilation in order to progress to draw
to do this, create the file watch-run.js
const webpack = require('webpack')
const ProgressBarPlugin = require('progress-bar-webpack-plugin');

//create multicoupler of our configs:
const compiler = webpack([
require('./webpack.config.js'),
require('./webpack.server.config.js')
]);

//create a progress plugin and feed him the compilers are
new ProgressBarPlugin({
 // here is the config for progress
}).apply(compiler);

then there are two options:
1. if our server is running express, all just wrap our compilers in a webpack-dev-middleware and fed it all in express will work, and requests for derived build will hold at compile time, except to bakonygyirot Midler to smaller logs wrote
2. watch run handles

with option 1 everything is simple, the whole file server.js wrap the exported function, in order to give him the compilers are:
module.exports = compiler => {
 // it's basically Your code but with some additions

 // first, connect midleware where plug-in other modules
 const devMiddleware = require('webpack-dev-middleware');

 // well, where the thread will give Ekspres
 // if server.js where can webpack to run
 // you should wrap it in if(compiler) { }
app.use(devMiddleware(compiler));

 // again, if server.js where can webpack to run
 // we need to run this function if it has not run
 // add a variable flag to keep track of
 isRunned = true;
};

// and declare our flag outside the function
let isRunned = false;
//well, if nextTick she has not been started, start
process.nextTick(() => isRunned || module.exports());

in watch-run.js remains to add only 1 line:require('./server.js')(compiler);

option 2 is not much harder, just add in watch-run.js:
// run the compilers in watch mode:
compiler.watch(err => {
 if(err) console.error(err);
});

// and connect server.js (this time without change it)
require('./server.js')


all remained in the start script to register:
cross-env NODE_ENV=development node watch-run.js

Find more questions by tags Webpack