Webpack từ A đến Á: Webpack import jQuery – Bootstrap

Tram Ho

Webpack từ A đến Á cùng kentrung

Bài hôm nay sẽ tiếp tục học cách load thêm thư viện và ví dụ ở đây là bootstrap phiên bản 4x.

1. Chuẩn bị file

Code file webpack.config.js ban đầu:

Code file dist/index.html

Trang html này mình định tạo Carousel của bootstrap, vì mình chưa học cách load css vào trong webpack nên tạm thời mình load sẵn css vào trong html chỗ này.

Code file src/index.js

Đoạn code trên có tác dụng tự động chạy carousel và thời gian tự động chuyển slide tiếp theo là 1 giây. Mình set thời gian ngắn để test nhìn cho nhanh thôi. Chạy thử webpack ta có giao diện và log như sau:

Webpack từ A đến Á cùng kentrung

2. Load jQuery

Bài trước đã hướng dẫn cách load jQuery rồi nhưng thôi bài này hướng dẫn lại từ đầu cho dễ theo dõi. Trước tiên mình phải cài đặt jQuery qua npm

Sau khi tải xong jQuery tiếp theo ta sửa lại webpack.config.js để load jQuery thông qua provide plugin của webpack

Vậy là chúng ta đã giải quyết xong vấn đề load jQuery để hiểu được các kí tự $ trong code src/index.js. Chạy thử webpack và chúng ta có log lỗi như sau:

Cái này là do chúng ta chưa load Boostrap Javascript, hàm carousel là của boostrap chứ không phải của jQuery nên nó không hiểu là đúng rồi.

3. Load Bootstrap

Tải boostrap qua npm

Khi cài đặt nó thì ở màn cmd có cảnh báo mà chúng ta cần lưu ý

Ý nó muốn nói thằng bootstrap cần cài thêm popper.js bản từ 1.16.0 trở lên nhưng chưa được cài, bạn phải tự cài bằng tay (handjob), thế thì cài thêm cho đủ bộ.

Bước tiếp theo là chúng ta load Bootstrap Javascript vào trong file src/index.js

Câu lệnh import kia nó sẽ tự động tìm trong node-modules rồi đến bootstrap. Trong module này file package.json có khai báo

nên câu lệnh import ở trên chỉ là viết tắt của:

Chạy lại webpack npm run dev và kết quả carousel đã chạy thành công. NGON!

Webpack từ A đến Á cùng kentrung


Bài viết đến đây là hết, hi vọng với bài viết này các bạn đã thêm được nhiều kiến thức bổ ích. Hẹn gặp lại các bạn ở bài viết tiếp theo!

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo