How to organize a beautiful assembly in webpack (progressbar, etc.)?

Question

webpack

Hello, I'm starting a new project and I want to clean up the mess in the assembly - make progressbars with percentages, for example, like nuxt.
Painfully a lot of spam falls into the console.
Here is my current webpack config:

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"
    }),
  ]
}

But 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 0/0 modules 0 active
webpack is watching the files…

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

 11% building 12/14 modules 2 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 tried the progress-bar-webpack-plugin and webpackbar but still couldn't get them to look nice.
Does anyone have any tips or can share a guide?
Thank you!

Answer 1

Well, firstly, you have 3 processes running in parallel and throwing everything into a common stdout, naturally there will be porridge ...
Secondly, here is an outdated plugin, I don’t know if there is a new one, but still:

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

So, for starters, let's run 2 assemblies in one process, and at the same time we will intercept compilation control, in order to draw progress,
for this we will create a watch-run.js file

const webpack = require('webpack')
const ProgressBarPlugin = require('progress-bar-webpack-plugin');

//создадим мультикомпилер из наших конфигов:
const compiler = webpack([
  require('./webpack.config.js'),
  require('./webpack.server.config.js')
]);

//создадим прогресс плагин и скормим ему компилер
new ProgressBarPlugin({
  // тут конфиг для прогресса
}).apply(compiler);

then there are two options:
1. if our server is based on express, then everything is simple - we wrap our compiler in webpack-dev-middleware and feed it all in express - and it will work, and requests for a derivative build will be delayed for compilation time, except to configure the middleware so that it writes less logs
2. watch we start with handles
with 1 option everything is simple, we will wrap the entire server.js file into an exported function so that we can send the compiler to it:

module.exports = compiler => {
  // тут в основном будет Ваш код, но с некоторыми добавлениями

  // во-первых, подключим мидлварь там где подключаем остальные модули
  const devMiddleware = require('webpack-dev-middleware');

  // ну и где нить его отдадим экспресу
  // если server.js где то может без webpack запускаться,
  // то стоит обернуть это в if(compiler) {   }
  app.use(devMiddleware(compiler));

  // и опять же, если server.js где то может без webpack запускаться
  // то нужно как то запускать данную функцию если ее никто не запустит
  // добавим переменную флаг, чтоб это отслеживать
  isRunned = true;
};

//  а объявим наш флаг вне функции
let isRunned = false;
//ну и если по nextTick она еще не была запущена, то запустим
process.nextTick(() => isRunned || module.exports());

only 1 line remains to be added to watch-run.js: with option 2 it’s not much more difficult, just add to watch-run.js:require('./server.js')(compiler);

// запустим компилер в режиме watch:
compiler.watch(err => {
  if(err) console.error(err);
});

// и подключим server.js (на этот раз можно без его изменения)
require('./server.js')

everything, it remains to write the script in start:
cross-env NODE_ENV=development node watch-run.js