Có gì mới trong webpack 4

Webpack là một gói module tĩnh cho các ứng dụng JavaScript hiện đại. Nó giúp gói tất cả các module khác nhau và gói chúng thành một hoặc nhiều gói.

---

Tuần này, Webpack 4 đã được phát hành, cung cấp các tính năng và cải tiến mới. Bài viết này khám phá các tính năng và cải tiến mới trong Webpack 4.

Để bắt đầu với webpack 4, hãy cài đặt trong dự án của bạn bằng npm:

npm install webpack webpack-cli --save-dev 

Bạn cũng có thể cài đặt nó với Yarn:

yarn add webpack webpack-cli --dev 

Hỗ trợ Node.js

Webpack 4 bỏ hỗ trợ cho Node.js 4. Quyết định này được đưa ra để tận dụng cú pháp ES6 hiện đại dẫn đến cơ sở mã ổn định và sạch hơn.

Điều quan trọng cần lưu ý là các dự án sử dụng các version Webpack cũ hơn có thể bị giảm hiệu suất do cú pháp JavaScript hiện đại hiện đang được sử dụng.

Tăng tốc độ xây dựng

Sử dụng Webpack 4 hiện đảm bảo bạn giảm tới 98% thời gian xây dựng cho các dự án của bạn nhờ các cải tiến về hiệu suất.

Các hình ảnh sau đây cho thấy thời gian xây dựng cho một dự án sử dụng Webpack 3 và Webpack 4, tương ứng:

Webpack 3 đã xây dựng dự án trong 1350 mili giây. Webpack 4 đã xây dựng dự án trong 865 mili giây:

Thuộc tính Chế độ

Webpack 4 đi kèm với một thuộc tính gọi là mode cho phép bạn đặt môi trường bạn đang làm việc: development hay production . Mỗi lựa chọn đều có những ưu điểm và cách sử dụng riêng.

Đặt mode để development cho phép bạn tập trung vào việc xây dựng bằng cách mang lại cho bạn trải nghiệm phát triển tốt nhất với các tính năng như:

• Công cụ để gỡ lỗi trình duyệt.
• Comment , thông báo lỗi chi tiết và gợi ý để phát triển được bật.
• Xây dựng lại gia tăng nhanh chóng và tối ưu hóa.

Đặt mode thành production cung cấp cho bạn tùy chọn tốt nhất và các giá trị mặc định cần thiết để triển khai dự án của bạn, chẳng hạn như:

• Tối ưu hóa để tạo các gói được tối ưu hóa.
• Nối module (Scope Hoisting).
• Kích thước kết quả nhỏ hơn.
• Loại trừ mã chỉ dành cho phát triển.

webpack sẽ luôn gặp lỗi nếu mode chưa được cài đặt như trong hình sau:

Bạn có thể đặt chế độ của bạn trong file webpack.config.js thành development hoặc production .

module.exports = {     mode: 'development' } 

hoặc là

 module.exports = {     mode: 'production' } 

Thuộc tính mode cũng none chấp nhận thay vì development hoặc production nếu bạn muốn loại bỏ lỗi do Wepback ném ra và vô hiệu hóa mọi thứ.

Plugin và Tối ưu hóa

Các CommonsChunkPlugin được loại bỏ trong Webpack 4 và đã được thay thế bằng một tập hợp các giá trị mặc định và API gọi optimization.splitChunks và optimization.runtimeChunk . Điều này nghĩa là bây giờ bạn có thể tự động tạo các phần được chia sẻ cho bạn. Một số plugin khác cũng không được dùng nữa trong version 4.

• NoEmitOnErrorsPlugin đã bị phản đối và bây giờ là optimization.noEmitOnErrors . Nó được đặt thành bật theo mặc định trong chế độ production
• ModuleConcatenationPlugin đã bị phản đối và bây giờ là optimization.concatenateModules . Nó được đặt thành bật theo mặc định trong chế độ production
• NamedModulesPlugin đã bị phản đối và bây giờ là optimization.namedModules . Nó được đặt thành bật theo mặc định trong chế độ production

Trong một nỗ lực để cải thiện hiệu suất và nhận được tối ưu hóa tốt nhất, UglifyJs hiện lưu trữ và hiển thị song song theo mặc định trong webpack 4.

Các loại module mới

Webpack hiện hỗ trợ các loại module này:

• javascript / auto : (Mặc định trong webpack 3) Mô-đun Javascript với tất cả các hệ thống module được bật: CommonJS, AMD, ESM
• javascript / esm: Mô-đun EcmaScript, tất cả các hệ thống module khác không khả dụng
• javascript / dynamic : Chỉ các module CommonJS và EcmaScript không khả dụng
• json : Dữ liệu JSON, nó có sẵn thông qua yêu cầu và nhập
• webassembly / thử nghiệm : Mô-đun WebAssembly (hiện đang thử nghiệm)

javascript/auto từng là module mặc định trong Webpack 3, nhưng Webpack 4 đã hoàn toàn trừu tượng hóa tính cụ thể của JavaScript khỏi cơ sở mã để cho phép thay đổi này để user có thể chỉ định loại module họ muốn.

Ngoài ra, Webpack sẽ tìm kiếm các phần mở rộng .wasm , .mjs , .js và .json theo thứ tự này.

0CJS

0CJS nghĩa là một ứng dụng Zero Config. Ý tưởng là bạn cần cấu hình tối thiểu hoặc 0 để bắt đầu và chạy một dự án JavaScript. Đó là tiền đề của gói tương đối mới, Parcel cũng chạy trên đó. Bạn không cần file cấu hình để bắt đầu xây dựng ứng dụng của bạn .

Với version 4, Webpack không còn yêu cầu file webpack.config.js .

Tất cả những gì bạn cần làm là có một file ./src/index.js . Khi nào bạn chạy lệnh webpack trong terminal, Webpack sẽ biết sử dụng file đó làm điểm nhập cho ứng dụng. Điều này có thể hữu ích cho các dự án nhỏ.

Cập nhật khác

• Các nhánh đã chết hiện đã được chính Webpack loại bỏ. Điều này đã được thực hiện bởi Uglify trước đây nhưng Webpack chịu trách nhiệm xóa mã chết ngay bây giờ.
• import() hiện hỗ trợ webpackInclude và webpackExclude như một comment kỳ diệu. Điều này cho phép lọc các file khi sử dụng một biểu thức động.
• Việc sử dụng System.import() trong mã của bạn hiện phát ra một cảnh báo nhẹ nhàng. import() được khuyên dùng.
• UglifyJs hiện lưu vào bộ nhớ cache và chạy song song theo mặc định.
• thẻ script không còn sử dụng text/javascript và async vì đây là các giá trị mặc định. Điều này tiết kiệm một vài byte.

Kết luận

Đây chỉ là một số trong nhiều tính năng có trong webpack 4. Vẫn còn rất nhiều bản cập nhật và cải tiến để mong đợi như:

• Mô-đun HTML / CSS. Điều này nghĩa là bạn có thể sử dụng file HTML / CSS làm điểm nhập.
• Bộ nhớ đệm liên tục.
• Đa stream và Đa lõi.
• Chuyển hỗ trợ WebAssembly từ thử nghiệm sang ổn định.

Bạn có thể xem toàn bộ log phát hành cho webpack 4 tại đây .

---

---

Các tin liên quan