Webpack 5: Webpack import Bootstrap 5

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

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:

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

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

Bootstrap phụ thuộc vào Popper được chỉ định trong thuộc tính peerDependencies. Điều đó có nghĩa chúng ta phải thêm nó vào trong package.json bằng câu lệnh bên dưới.

npm install @popperjs/core

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

1. Chuẩn bị file

3. Load Bootstrap

Mục lục