Webpack

JS May 10, 2021

Công cụ tự động hóa quá trình phát triển

Đối với các nhà phát triển front-end trước đây, họ thường đặt tất cả các file JS, CSS, images vào trong thư mục assets. Tất nhiên chúng ta có thể quản lý được việc này. Tuy nhiên, phạm vi của các dự án ngày càng được nâng lên và các khía cạnh như hiệu suất ứng dụng và bảo mật ngày càng trở nên quan trọng hơn. Vì thế việc quản lý như thế này sẽ gặp rất nhiều khó khăn.

Hàng ngày, các nhà phát triển front-end thường phải xử lý rất nhiều vấn đề. Vì thế, các nhà phát triển có xu hướng tự động hóa quy trình làm việc để tiết kiệm thời gian. Có một số hoạt động mà các nhà phát triển thực hiện hàng ngày như :

  • Tự động sửa lỗi và tiền xử lý CSS
  • Rút gọn mã code
  • Xóa các lệnh của trình gỡ lỗi và câu lệnh console
  • Chạy unit test
  • Điều chỉnh khoảng căn lề, break dòng
  • Nén các file ảnh

Vì thế mà các công cụ tự động hóa quy trình làm việc ra đời. Các công cụ này rất quan trọng đối với các dự án yêu cầu phát triển ứng dụng web. Những công cụ này có thể hỗ trợ cải thiện năng suất của nhà phát triển. Ngoài ra, chúng có thể tự động hóa các hoạt động thông thường như tiền xử lý CSS, nén hình ảnh, v.v.

Trong đó, Webpack có thể coi là một trong những công cụ phổ biến nhất hiện nay mà nhiều framework như VueJS, ReactJS, ... đang sử dụng.

I) Webpack là gì

  • Là công cụ giúp bạn compile các module Javascript (module bundler)​
  • Hiểu đơn giản, Webpack giúp gói gọn toàn bộ file js, css(bao gồm cả scss,sass,..)

II) Webpack có thể làm được những gì

  • Dễ dàng phát triển, quản lý, customize​
  • Cải thiện hiệu suất dự án​
  • Phân chia các module và tải khi cần (lazy loading)​
  • Đóng gói (bundle) tất cả các file nguồn thành 1 file duy nhất, có thể biên dịch loại file khác nhau dựa vào loader​
  • Tiền xử lý CSS, ES6​
  • Và còn rất nhiều các chức năng khác

III) Cài đặt và sử dụng

  • Local Installation :    npm install --save-dev webpack
  • Global Installation :    npm install --global webpack

Sau khi cài đặt được webpack vào project thì mình khởi tạo 1 file webpack.config.js để config cho Webpack​

wepback.config.js
  • Entry : nơi xác định module nào để bắt đầu xây dựng dependency graph bên trong nó. Webpack tìm các module và thư viện mà entry point phụ thuộc vào (trực tiếp hay gían tiếp)
  • Output : cho biết nơi phát ra các gói (bundles) mà nó tạo ra và đặt tên cho các tệp này

Sau khi config xong, để chạy được Webpack chúng ta đặt 1 đoạn script vào trong package.json như sau :

Chạy npm run build để Webpack bắt đầu tiến hành bundle. Sau khi hoàn tất, chúng ta có cấu trúc thư mục như sau :

Luồng hoạt động của Webpack có thể được mô tả như trong hình vẽ dưới đây. Đầu tiên, Webpack đọc tất cả entry points (src/index.js) và tải tất cả các gói phụ thuộc. Sau đó, Webpack gói (bundle) module thành 1 file duy nhất (dist/bundle.js)

IV) Loaders

  • Webpack chỉ hiểu các tệp JSJSON file. Vì thế, Loaders cho phép xử lý các tệp khác và chuyển đổi chúng thành module hợp lệ để ứng dụng có thể sử dụng được.
  • Đối với Webpack, mọi thứ đều là module. Khi làm việc với js, chúng ta thường tạo module ứng với 1 hoặc nhiều file js gộp lại. Thì đối với webpack thì những file như (CSS, Images, HTML) đều có thể trở thành module. Nó không khác gì khi chúng ta sử dụng file js cả.
  • Code => loaders => plugins => output
  • Ví dụ : yêu cầu Webpack tải tệp CSS và chuyển đổi TypeScript sang JS​
  • Xử lý : Cài đặt loader cần thiết  : npm install --save-dev css-loader ts-loader . Thiết lập cấu hình file webpack.config.js​

V) Plugins

  • Là xương sống của webpack.​
  • Phục vụ mục đích làm bất cứ điều gì khác mà loader không làm được.​ Đối với Loaders, chúng thường xử lý liên quan đến chuyển đổi, còn đối với Plugins chúng thực thi trên tất cả các tệp và thực hiện các hành động nâng cao hơn.
  • Code => loaders => plugins => output

Ví dụ 1 : HTMLWebpackPlugin​

  • Plugin đơn giản hóa việc tạo các tệp HTML để phục vụ các gói webpack của bạn

Ví dụ 2 : CopyWebpackPlugin

  • Sao chép các tệp riêng lẻ hoặc toàn bộ thư mục đã tồn tại vào thư mục xây dựng

Ví dụ 3 : CopyWebpackPlugin

  • Tối ưu các đoạn mã code Javascript

VI) Code Spliting

  • Là một trong những tính năng hấp dẫn nhất của webpack. Tính năng này cho phép bạn chia mã nguồn của mình thành nhiều gói khác nhau, sau đó có thể tải theo yêu cầu hoặc song song. Nó có thể được sử dụng để đạt được các gói nhỏ hơn và kiểm soát mức độ ưu tiên tải tài nguyên, nếu được sử dụng đúng cách, có thể tác động lớn đến thời gian tải.
  • Tìm hiểu thêm tại đây : https://webpack.js.org/guides/code-splitting/

VI) Webpack-dev-server

  • Tiếp theo, chúng ta sẽ tìm hiểu cách tạo một web server đơn giản tại địa chỉ localhost:8080 và tự động reload thông qua webpack-dev-server
  • Webpack-dev-server chạy trên nền của Express NodeJS server và chạy port mặc định 8080. Chúng thích hợp cho môi trường development và cung cấp chức năng "Live Reloading" và "Hot Module Replacement"
  • Hot Module Replacement : là một cách trao đổi các mô-đun trong một ứng dụng đang chạy (và thêm / bớt các mô-đun). Cập nhật các mô-đun đã thay đổi mà không cần tải lại toàn bộ trang.​
  • Cài đặt : npm install –D webpack-dev-server
  • Thêm script trong package.json
  • Chạy command : npm run serve

Tổng kết

  • Webpack là một công cụ rất hữu ích, nó giúp chúng ta tối ưu và quản lý dự án một cách tuyệt vời
  • Cám ơn mọi người đã theo dõi

Tags

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.