Tôi bắt đầu làm việc với webpackvới một node/expressmôi trường phát triển một ReactJSứng dụng phía máy chủ trả lại với react-router. Tôi đang rất bối rối về vai trò của mỗi gói webpack đối với môi trường dev và prod (thời gian chạy).
Đây là bản tóm tắt hiểu biết của tôi:
webpack: Là một gói, một công cụ để nối các phần khác nhau của một ứng dụng web lại với nhau và đóng gói lại trong một tệp .js duy nhất (thông thường bundle.js). Sau đó, tệp kết quả được cung cấp trong môi trường sản phẩm để ứng dụng tải và chứa tất cả các thành phần cần thiết để chạy mã. Các tính năng bao gồm mã thu nhỏ, thu nhỏ, v.v.
webpack-dev-server: Là một gói cung cấp một máy chủ để xử lý các tệp trang web. Nó cũng xây dựng một tệp .js ( bundle.js) từ các thành phần máy khách nhưng phục vụ nó trong bộ nhớ. Nó cũng có tùy chọn ( -hot) để giám sát tất cả các tệp xây dựng và xây dựng một gói mới trong bộ nhớ trong trường hợp thay đổi mã. Máy chủ được phục vụ trực tiếp trong trình duyệt (ví dụ http:/localhost:8080/webpack-dev-server/whatever:). Sự kết hợp giữa tải bộ nhớ, xử lý nóng và phục vụ trình duyệt cho phép người dùng cập nhật ứng dụng trên trình duyệt khi mã thay đổi, lý tưởng cho môi trường phát triển.
Nếu tôi nghi ngờ về dòng chữ trên, tôi thực sự không rõ lắm về nội dung bên dưới, mong các bạn tư vấn cho tôi nếu cần
Một vấn đề phổ biến khi sử dụng webpack-dev-servervới node/expressđó webpack-dev-serverlà máy chủ node/express. Điều đó làm cho môi trường này trở nên khó khăn khi chạy cả máy khách và một số mã nút / mã express (API, v.v.). LƯU Ý: Đây là những gì tôi đã phải đối mặt nhưng sẽ rất tuyệt nếu hiểu tại sao điều đó xảy ra chi tiết hơn ...
webpack-dev-middleware: Đây là một phần mềm trung gian có cùng chức năng webpack-dev-server(gói bộ nhớ, tải lại nóng), nhưng ở định dạng có thể được đưa vào server/expressứng dụng. Theo cách đó, bạn có một loại máy chủ (bên trong webpack-dev-server) máy chủ nút. Oops: Đây có phải là một giấc mơ điên rồ ??? Làm cách nào mà phần này có thể giải được phương trình dev và prod và làm cho cuộc sống trở nên đơn giản hơn
webpack-hot-middleware: Cái này ... Mắc kẹt ở đây ... tìm thấy mảnh này khi tìm kiếm webpack-dev-middleware... Không biết sử dụng nó như thế nào.
ENDNOTE: Xin lỗi, có bất kỳ suy nghĩ sai lầm nào. Tôi thực sự cần trợ giúp để phá hủy những biến thể này trong một môi trường phức tạp. Nếu tiện lợi, vui lòng thêm các gói / dữ liệu khác sẽ xây dựng toàn bộ kịch bản.
webpack-dev-middleware(và có khả năngwebpack-hot-middleware) nếu bạn muốn viết máy chủ phát triển tùy chỉnh của riêng mình. Trừ khi có một tính năng cụ thể mà bạn muốn màwebpack-dev-serverkhông có, bạn chỉ nên sử dụng tính năng đó.