Webpack là một module bundler cho những ứng dụng javascript hiện đại. Bundle là quá trình gom (hay còn gọi là nén) các tài nguyên khác nhau (source code) vào một file duy nhất sau đó sẽ trả về client. Bundle có thể bao gồm javascript, css, html và hầu hết các loại file khác. Đồng thời, nó cũng có những ứng dụng khá tương đồng với các thư viện khác như: RequireJs, SystemJs,..Kết hợp với một số plugin nó có thể xử lý và nén các loại file như: Typescript, SASS, và LESS. Dưới đây là một số khái niệm quan trọng của Webpack.
1.1 Entry
Webpack tạo ra một đồ thị của toàn bộ những phụ thuộc trong ứng dụng của bạn. Điểm bắt đầu của đồ thị này được gọi là một entry. Entry nói cho Webpack nơi để bắt đầu và theo dõi các phụ thuộc để biết được cái gì cần bundle. Hoặc bạn có thể hiểu entry như file đầu tiên để khởi động app.
Loader in webpack chuyển đổi những file .css, .html, .jpg,.. đến những modules mà chúng được thêm trong đồ thị sự phụ thuộc. Chúng có 2 mục đích chính trong config:
Xác định những file nào nên được chuyển đổi bởi loader nào.
Chuyển đổi file đó để làm sao nó có thể thêm vào đồ thị sự phụ thuộc.
<main>
<h1>Hello from Angular App with Webpack</h1>
<img src="../../public/images/angular.png">
</main>
Các bạn có thể xem code đầy đủ tại link sau:
Angular2-webpack-demo
Điểm nổi bật:
Không có thẻ <script> hoặc thẻ <link> trong indexex.html. "HtmlWebpackPlugin" chèn chúng tự động tại runtime.
AppComponent trong app.component.ts import css như những module javascript
AppComponent có file html và css của riếng nó. Webpack tải chúng với việc gọi reqired(). Chúng ta không hề thấy những công việc này trong source code, chúng được thêm bên trong plugin "angular2-template-loader"
Vendor.ts bao gồm những những câu lệnh import các dependency để đưa tới file vendor.js. Ứng dụng cũng import những module này. Như vậy, sẽ có trùng lặp trong file app.js sau khi bundle. "CommonsChunkPlugin" thực hiện việc phát hiện và gỡ bỏ những trùng lặp này.
3. Kết luận
Hy vọng những nội dung trên đây sẽ đóp góp những hiểu biết cơ bản nhất dành cho các bạn về Webpack và sử dụng nó trong Angular 2. Chúc các bạn thành công.