Bài trước chúng ta đã biết cách thêm thư viện jQuery vào trong webpack. Bài hôm nay sẽ tiếp tục học cách thêm thư viện bootstrap phiên bản 5.x.x cụ thể ở đây là 5.1.3
1. Chuẩn bị file
Các file code ban đầu:
const path = require('path')
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack từ A đến Á cùng kentrung</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.carousel-item {height: 25rem;}
</style>
</head>
<body>
<div class="container">
<div id="myCarousel" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
<rect width="100%" height="100%" fill="#777" />
</svg>
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
<rect width="100%" height="100%" fill="#777" />
</svg>
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
<rect width="100%" height="100%" fill="#777" />
</svg>
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Trang html này mình định tạo Carousel của bootstrap 5, vì mình chưa học cách thêm css vào trong webpack nên tạm thời mình thêm css qua link CDN như này.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
/>
var myCarousel = document.querySelector('#carouselExampleCaptions')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 1000,
ride: true
})
Đoạn code trên có tác dụng tự động chạy carousel và thời gian tự động chuyển slide 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:
Uncaught ReferenceError: bootstrap is not defined at (index.js:2:16)
3. Load Bootstrap
Tải boostrap qua npm: https://www.npmjs.com/package/bootstrap/v/5.1.3
npm install bootstrap@5.1.3
Khi cài đặt nó thì ở màn cmd có cảnh báo mà chúng ta cần lưu ý
npm WARN bootstrap@5.1.3 requires a peer of @popperjs/core@^2.10.2
but none is installed. You must install peer dependencies yourself.
Ý nó muốn nói thằng bootstrap cần cài thêm popper.js bản từ 2.10.2 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ộ.
npm install @popperjs/core@^2.10.2
File package.json sẽ có thông tin như này
{
...
"dependencies": {
"@popperjs/core": "^2.11.5",
"bootstrap": "^5.1.3"
}
}
Bước tiếp theo là chúng ta load Bootstrap Javascript vào trong file src/index.js
const bootstrap = require('bootstrap')
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 1000,
ride: true
})
Chạy lại webpack npm run dev và kết quả carousel đã chạy thành công. NGON!
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!
- Tham khảo cách cài boostrap cho webpack tại: https://getbootstrap.com/docs/5.1/getting-started/webpack/
- Sourcode github: https://github.com/kentrung/webpack-tutorial
- Series webpack: https://viblo.asia/s/webpack-tu-a-den-a-cung-kentrung-pmleB8Am5rd
Bài viết liên quan
[CSF-2] Một số thiết lập CSF, LFD
Hôm nay mình sẽ thực hiện một số thiết lập trên CSF Mở file config để sửa đổi một số tính năng dưới /etc/csf/csf.conf Nội dung chính1. Chuẩn bị file3. Load Bootstrap1. Bảo vệ khỏi...
[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF)
Nội dung chính1. Chuẩn bị file3. Load Bootstrap1. Khái niệm CSF: CSF (ConfigServer & Firewall) là một bộ ứng dụng hoạt động trên Linux như một firewall được phát hành miễn phí để tăng tính...
Sử dụng SSH Key với Gitlab và Github
Bài viết này mình sẽ hướng dẫn các bạn tạo ssh key cho Gitlab và Github SSH là gì? Secure Socket Shell là một giao thức mạng dùng để thiết lập kết nối mạng một...
Directory traversal vulnerabilities (phần 4)
Nội dung chính1. Chuẩn bị file3. Load BootstrapV. Phân tích và khai thác các lỗ hổng Directory traversal (tiếp) 5. Bypass lỗ hổng khi trang web sử dụng đường dẫn đầy đủ Xét đoạn code...
Directory traversal vulnerabilities (phần 3)
Nội dung chính1. Chuẩn bị file3. Load BootstrapV. Phân tích và khai thác các lỗ hổng Directory traversal 1. Lỗ hổng xảy ra khi sử dụng các hàm đọc file và tin tưởng đầu vào...
Directory traversal vulnerabilities (phần 2)
Nội dung chính1. Chuẩn bị file3. Load BootstrapIII. Vì sao lỗ hổng Directory traversal xuất hiện? Với mỗi ngôn ngữ lập trình khác nhau, điểm xuất hiện các lỗ hổng Directory traversal cũng khác nhau....