Прогресс загрузки пакета Webpack

Мне нужно отобразить индикатор выполнения, в то время как куски webpack загружаются с сервера. Есть ли простое решение для достижения этого? Я бы ожидал, что для этого уже существует какой-то плагин, но быстрый поиск в google не выявил.

Спасибо

Ответ 1

require.ensure возвращает обещание. с этим вы можете указать, загружен ли кусок или нет:

//entry.js
console.log('loading my chunk...);
let chunkPromise = require.ensure([], () => {
  require('./my-module');
});

chunkPromise
  .then(() => console.log('chunk loaded'))
  .catch(e => console.error('chunk failed to load'));

Ответ 2

- ОБНОВЛЕНИЕ-- Мои извинения, что я неправильно понял вопрос, но я просто буду жить этим ответом здесь, потому что это относится к нему.

Я верю, что вы ищете: "progress-bar-webpack-plugin" просто выполните установку npm:

npm install progress-bar-webpack-plugin -D

Затем включите его в свои настройки плагина webpack, например:

plugins: [
  new ProgressBarPlugin()
]

В этот плагин есть еще несколько параметров, которые вы можете увидеть здесь: https://www.npmjs.com/package/progress-bar-webpack-plugin

Там также есть еще один плагин для этого. Он называется ProgressPlugin, за исключением того, что это создаст список всех построенных модулей и процент, а не индикатор выполнения.

Вот пример реализации:

new webpack.ProgressPlugin(function handler(percentage, msg) {
  var p = Math.floor(percentage * 100);
  if (config.percent !== p) {
    config.percent = p;
    console.log(msg, config.percent + '%');
  }
}),

Просто добавьте это в свои плагины webpack, и он покажет прогресс для модулей, встроенных в терминал.

Либо один работает хорошо, я предпочитаю точно как индикатор выполнения, так как я не хочу видеть огромный список в моем терминале. Твой выбор!:)