Sự phát triển nhanh chóng của công nghệ thông tin khiến các khái niệm như webpack là gì khiến không ít người tò mò. Nếu bạn đang tìm kiếm lời giải cho câu hỏi này thì nên tham khảo ngay bài viết dưới đây của chúng tôi.

Webpack là gì? Công dụng của webpack

Webpack là một trong những công cụ có thể giúp gói gọn toàn bộ file js, css (bao gồm scss, sass,…). Việc thực hiện gói gọn được thực hiện theo cấu trúc project và theo thứ tự từ phần modul này sang phần kia.

Hiện nay, hầu hết các website đang dần có xu hướng trở thành những web app với các đặc tính như: 

• Sử dụng JS ngày càng nhiều hơn. 
• Các browser đã và đang ngày càng được hỗ trợ các công nghệ mới. 
• Các trang full-page-reload ngày càng ít đi, single page app sẽ được lên ngôi. 

Điều này dẫn đến việc code client-side ngày càng gia tăng nhiều hơn. Điều này khiến chúng ta cần phải có những công cụ để thực hiện quản lý chúng một cách hiệu quả hơn. Trong khi đó, webpack là một trong những công cụ được đánh giá là mạnh mẽ có khả năng làm được điều này. Công cụ này nhận vào các module cùng với dependencies và generate ra các static assets tương xứng. 

Ngoài ra, webpack được đánh giá cao nhờ sở hữu rất nhiều chức năng hữu dụng như: qua webpack sử dụng plugin nén 1 file được giảm từ 6mb xuống 76 kb. Với khả năng contribute của một cộng đồng dev khổng lồ nên webpack đã trở thành một tool sở hữu khả năng hỗ trợ tốt cho các dev js. 

Các kiến thức cần nắm vững về webpack

Webpack 4 không cần cấu hình module bundler

 Webpack là công cụ rất mạnh mẽ và không ít các feature khá độc; bên cạnh đó cũng có nhiều điểm hạn chế cho phần mềm này là configuration file. 

Việc cung cấp cấu hình cho webpack không còn là vấn đề lớn. Tuy nhiên, với những dự án nhỏ thì nó tương đối rắc rối. Sean cũng như team webpack đang dần thay đổi và thân thiện hơn là: công cụ này không cần 1 file với cấu hình mặc định. 

Trong webpack 4 thì bạn không cần phải define entry point, cũng như không cần trong out put file. 

Webpack 4: production và development mode. 

Thường có 2 cấu hình phổ biến trong webpack là: 

• 1 file thường cấu hình cho development để mình có thể define webpack dev server và một số thứ khác. 
• 1 dành cho production để define UglifyJSPlugin, sourcemaps,… 

Nếu khi gặp những project lớn thì bạn cần phải có 2 file này. Bên trong webpack 4 thì bạn có thể sử dụng với 2 trạng thái của nó mà không cần thực hiện bất kỳ một cấu hình nào. 

Tìm hiểu về module trong webpack

Theo khái niệm webpack là gì thì chúng ta có thể sử dụng công cụ này trong lập trình và cần phải có input cũng như output. Nếu như có input và output  rồi thì thứ còn thiếu cần đáp ứng đó là module. Đây là một trong những nơi khai báo loaders, preLoaders, postLoaders,… 

• preLoaders: Đây là các tiền xử lý thường được nạp khi tiến hành chạy các modul loader. Nó sẽ hỗ trợ load các ESLint (còn gọi là check cú pháp) JSHint. Thông thường, bước này cần tiến hành config nếu như thực hiện code trên môi trường dev. Đối với môi trường product thì chỉ cần xóa đi thì người thực hiện sẽ đỡ mất công phải check lại tốn thời gian. 
• loaders: Bước này thì bạn cần phải khai báo một mảng bởi những compile các ngôn ngữ khác nhau. Đây là một trong những chỗ khai báo quan trọng đối với một webpack: Ví dụ như: chuyển less, scss, es6 về dạng es5 thì người thực hiện có thể sử dụng babel.

Tìm hiểu code splitting trong webpack

Với những người biết đến webpack thì code spitting được biết đến như một tính năng thu hút được nhiều người dùng. 

Ví dụ về code splitting: Đối với một dự án thì cần import rất nhiều vào trong thư viện cùng một lúc là điều cần thiết, nếu như bạn có các file A.js import thư hiện C hoặc có một file B.js import thư viện C. Vậy, khi webpack build thì có thể trở thành 1 file có chứa code 2 lần đối với thư viện C, điều này có thể gây giảm performance. 

Thông thường sẽ có 3 cách để tiếp cận với split code hiện tại như sau: 

•  Entry point: Việc phân chia thủ công bằng những cấu hình file entry, để file có thể bắt đầu chạy ứng dụng để webpack có thể hoạt động. 
• Prevent duplication: Có thể sử dụng splitChunks để tiến hành xóa bundle trùng lặp và split ra các chunks. Bạn có thể hiểu đơn giản như sau: Webpack sẽ tự động tìm kiếm các thư viện import để ra những file riêng khác nhau; và khi code logic của bạn cần thì có thể lấy những file riêng này ra để sử dụng. 
• Dynamic Import: Việc chia code có thể thông qua các function được gọi trong các modules. 

Entry Point: Đây là một trong những cách thủ công và thường không sử dụng đến. Nếu như với trường hợp cả cả index.js và lib.js đều được cùng add một thư viện C thì sẽ giống như bạn đã sử dụng thư viện C2 lần. 

Prevent duplication: Với prevent duplication thì sẽ cho phép một plugin splitChunks; nó có nhiệm vụ lấy hết các thư viện được import trong project để tách ra thành những file riêng biệt đến khi nào code logic của ta cần thì những thư viện đó thì nó sẽ có thể tự động import. 

Tìm hiểu về dynamic import

Đối với hàm này hoặc hàm getCompoment sẽ return dynamic imports và trả về lodash. Cần thực hiện các thao tác phức tạp này bởi vì Dynamic imports nó import lodash khi cần cũng như giúp gia tăng performance. 

 Tìm hiểu về plugin trong webpack

Plugin là thứ không thể thiếu khi run project như UglifyJPSlugin webpackDashboard, webpackbundleanalyzer,…

Tìm hiểu về môi trường chạy

Ngoài biết được khái niệm webpack là gì thì việc học cơ bản thì có thể xài create-react-app của các bọn facebook, việc thấy react học sẽ dễ hơn. Tiếp đó, để nâng cao thì bạn có thể tìm kiếm vài project về react trên github đọc thử và sẽ có thể thấy nhiều file lạ, đó chính là webpack. Cơ chế chạy của webpack thường sẽ khác hoàn toàn với create react-app và thường create-react-app thì nó đã tích hợp sẵn rất nhiều file nhiều mới tạo ra nhiều chương trình ngon lành. Tuy nhiên, sự ngạc nhiên đối với nó trong project là nó sở hữu 3 file webpack. Sau khi giải đáp ra thông thường với một bản để dec phát triển và bản product để build server cho user sử dụng. Với những bản dev thì bạn có thể giữ lại comment code. Với bản product thì nếu bạn muốn minify để có thể tối ưu. Và 3 file này thông thường bao gồm: 

• webpack.config.js: File này là một trong những file chạy chung cho cả 2 môi trường. 
• webpack.config.dev.js: Thường chỉ chạy cho môi trường dev, bạn có thể thêm các plugin auto log data để có thể cho lập trình viên hơn trong việc phát triển sản phẩm. 
• webpack.config.prod.js: Thường chỉ triển khai đối với môi trường production, bạn có thể config, minify hoặc xóa comment,… 

Trên đây, là lời giải của chúng tôi cho câu hỏi webpack là gì cũng như những kiến thức cần nắm vững về webpack. Hy vọng, kiến thức này sẽ giúp bạn đọc hiểu rõ hơn về công cụ này cũng như những công dụng của nó.