Как в webpack организовать красивую сборку(прогрессбар и прочее)?

Question

[testopikachu]

Привет, начинаю новый проект и хочу разгребсти бардак в сборке - сделать прогрессбары с процентами, например как у nuxt
Уж больно много спама валится в консоль.
Вот мой текущий конфиг вебпака:

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

А вот столько инфы валится в консоль:

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 = *

Я пробовал progress-bar-webpack-plugin и webpackbar но у меня все равно не получилось настроить их красиво.

Может у кого нибудь есть что подсказать или кто то поделится гайдом?
Спасибо!

Answer 1

[Дмитрий Беляев]

Ну во-первых, у Вас 3 процесса параллельно работают и выкидывают все в общий stdout, естественно там будет каша...
Во-вторых, вот тут устаревший плагин, не знаю есть ли новый, но все же:

(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…

Итак, для начала запустим 2 сборки в одном процессе, а заодно и перехватим управление компиляцией, дабы прогресс рисовать
для этого создадим файл watch-run.js

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);

дальше есть два варианта действий:
1. если наш сервер на базе express, то все просто - оборачиваем наш компилер в webpack-dev-middleware и скармливаем все это в express - и работать будет, и запросы на производное билда будет задерживать на время компиляции, разве что поконфигурировать мидлварь, чтоб меньше логов писал
2. watch запускаем ручками

с 1 вариантом все просто, весь файл server.js обернем в экспортируемую функцию, дабы можно было отдать в него компилер:

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());

в watch-run.js останется добавить всего 1 строку:require('./server.js')(compiler);

со 2 вариантом не намного сложнее, просто добавим в watch-run.js:

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

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

все, осталось в start скрипт прописать:
cross-env NODE_ENV=development node watch-run.js