Cài đặt và cấu hình Webpack 4 – phần 2

Trong phần trước chúng ta đã cùng nhau tìm hiểu về cách cài đặt và cấu hình webpack4. Bạn nên đọc phần 1 trước khi đọc bài viết này.

Trong phần này chúng ta sẽ cùng nhau thử dựng một project nhỏ nhỏ dùng webpack 4 cho React và VueJS

Thiết lập webpack 4 với React

Trong phần trước chúng ta đã biết được cách cài đặt và cấu hình sử dụng babel trong webpack.

Cài đặt React

Tiếp theo cài thêm babel-preset-react

Cấu hình cài đặt trước trong file .babelrc

Bạn có thể cấu hình babel-loader để đọc các file .jsx. Nó rất là hữu ích nếu bạn đang sử dụng các đuôi .jsx cho các Component của React.

Mở file webpack.conf.js và cấu hình loader như sau

Để kiểm tra xem nó có chạy không, bạn có thể tạo một React Component bên trong ./src/App.js

Tiếp theo import component bên trong file ./src/index.js

Sau đấy chạy lại build

HTML webpack plugin

webpack cần thêm 2 component để xử lý HTML: html-webpack-pluginhtml-loader

Thêm dependency như sau

Sau đó cập nhập cấu hình webpack

Tiếp theo tạo file HTML vào ./src/index.html như sau

Chạy lại lệnh build

Sau đó kiểm tra trong thư mục ./dist bạn sẽ thấy kết quả của HTML

Sẽ không cần phải thêm Javascript vào trong file HTML, file bundle sẽ tự động được thêm vào

Mở file ./dist/index.html trong trình duyệt, bạn sẽ nhìn thấy React Component chạy

Như bạn có thể thấy không có gì thay đổi liên quan đến việc xử lý HTML

webpack 4 vẫn là đóng gói các module liên quan đến Javascript

Nhưng đang có kế hoạch đưa HTML vào như một module (HTML như một entry point)

Cài đặt webpack 4 với Vue

Nếu bạn muốn sử dụng Vue bên trong các dự án webpack bạn có thể cài đặt thư viện như sau

Kiểm tra hoạt động hay không bằng cách thay đổi nội dung trong file ./src/index.js như sau

Tiếp theo cấu hình webpack.conf.js để tải vue bundle

Bạn có thể chạy build lại và thấy rằng vue instance được đưa vào trong file HTML

Trích xuất css vào một file

webpack không biết cách trích xuất css vào một file

Trước đây chúng ta sử dụng extract-text-webpack-plugin. Đáng tiếc là plugin này không hoạt động được trên webpack4. Chúng ta có thể sử dụng mini-css-extract-plugin như một lựa chọn tốt hơn để thay thế. Chú ý rằng nó chỉ hoạt động tốt trên webpack 4.2.0

Cài đặt plugin và css loader như sau

Tiếp theo tạo css file để kiểm tra xem nó có hoạt động hay không

Cấu hình cả plugin và loader trong webpack

Cuối cùng import css vào trong entry point

Chạy build

Kiểm tra trong thư mục ./dist, bạn sẽ nhìn thấy kết quả của css

Webpack dev server

Chạy npm run dev bất cứ khi nào bạn thay đổi code không?

Nó chỉ mất một vài phút để cấu hình server development cho webpack

Sau khi cầu hình webpack dev server sẽ khởi chạy ứng dụng của bạn trong trình duyệt

Nó sẽ tự động refresh trình duyệt bất cứ lúc nào bạn thay đổi file

Để cài đặt webpack dev server, cần cài gói như sau

Sau đó mở file package.json điều chỉnh scripts như sau

Lưu và đóng file

Nào, hãy thử chạy lệnh

Bạn sẽ thấy webpack dev server đưa ứng dụng của bạn lên trình duyệt

 

 

 

You May Also Like

About the Author: Nguyen Dinh Thuc

Leave a Reply

avatar
  Subscribe  
Notify of