Tiến trình tải gói webpack

Question

Tôi cần hiển thị thanh tiến trình trong khi các khối webpack được tải từ máy chủ. Có một giải pháp dễ dàng để đạt được điều này? Tôi hy vọng rằng một số plugin đã tồn tại cho điều này, nhưng một tìm kiếm nhanh trên google đã không tiết lộ bất kỳ.

Cảm ơn

Answer 1

--UPDATE-- Xin lỗi của tôi, tôi đã hiểu lầm câu hỏi tuy nhiên tôi sẽ chỉ sống câu trả lời này ở đây vì nó loại liên quan đến nó.

---

Tôi tin rằng những gì bạn đang tìm kiếm là: "tiến-thanh-webpack-plugin" chỉ một NPM cài đặt về điều này:

NPM cài đặt tiến-thanh-webpack- Plugin -D

Sau đó, bao gồm nó trong cấu hình Plugin webpack của bạn như vậy:

plugins: [ 
    new ProgressBarPlugin() 
] 

Có nhiều tùy chọn mà bạn có thể thêm vào plugin này là tốt, mà bạn có thể thấy ở đây: https://www.npmjs.com/package/progress-bar-webpack-plugin

---

Ngoài ra còn có một plugin để làm việc này cho bạn. Nó được gọi là ProgressPlugin ngoại trừ việc điều này sẽ tạo ra một danh sách của mỗi mô-đun được xây dựng và phần trăm thay vì một thanh tiến trình.

Dưới đây là một thực hiện ví dụ:

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 + '%'); 
    } 
}), 

Chỉ cần thêm video này vào plugins webpack của bạn và nó sẽ hiển thị các tiến bộ cho các module tích hợp trong thiết bị đầu cuối.

Hoặc là một trong hai hoạt động tốt, tôi tốt giống như thanh tiến trình vì tôi không muốn nhìn thấy một danh sách lớn trong thiết bị đầu cuối của tôi. Lựa chọn của bạn! :)

Answer 2

require.ensure trả về lời hứa. với điều này, bạn có thể cho biết một đoạn đã được tải hay không:

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