Navigation

Webpack từ A đến Á: Webpack import jQuery - Bootstrap (ok)

https://kentrung256.blogspot.com/2020/08/webpack-import-jquery-bootstrap.html

C:\xampp\htdocs\test\package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "Học webpack từ A đến Á cùng kentrung",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack"
  },
  "keywords": [],
  "author": "kentrung",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  },
  "dependencies": {
    "bootstrap": "^4.5.0",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1"
  }
}

C:\xampp\htdocs\test\webpack.config.js

const path = require('path')
const webpack = require('webpack')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
}

C:\xampp\htdocs\test\src\index.js

import 'bootstrap';
$(document).ready(function(){
  $('.carousel').carousel()
})

Bài trước chúng ta đã biết cách load jQuery vào trong webpack. 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.

Nội dung chính

  • 1. Chuẩn bị file

  • 2. Load jQuery

  • 3. Load Bootstrap

1. Chuẩn bị file

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


const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
}

Code file dist/index.html


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Webpack từ A đến Á cùng kentrung</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
  <style>
    .carousel-item {height: 25rem;}
  </style>
</head>
<body>
  <div class="container">
    <div id="myCarousel" class="carousel slide">
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <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="container">
            <div class="carousel-caption text-left">
              <h1>Example headline.</h1>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
            </div>
          </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="container">
            <div class="carousel-caption">
              <h1>Another example headline.</h1>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
            </div>
          </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="container">
            <div class="carousel-caption text-right">
              <h1>One more for good measure.</h1>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
            </div>
          </div>
        </div>
      </div>
      <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
  <script src="main.js"></script>
</body>
</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.


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<style>
  .carousel-item {height: 25rem;}
</style>

Code file src/index.js


$(document).ready(function(){
  $('.carousel').carousel({
    interval: 1000,
    ride: 'carousel'
  })
})

Uncaught ReferenceError: $ is not defined at (main.js:1)

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


npm install jquery

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


const path = require('path')
const webpack = require('webpack')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
}

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:


Uncaught TypeError: e(...).carousel is not a function at (main.js:1)

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


npm install bootstrap

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


npm WARN bootstrap@4.5.0 requires a peer of popper.js@^1.16.0 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ừ 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ộ.


npm install popper.js

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


import 'bootstrap'

$(document).ready(function(){
  $('.carousel').carousel({
    interval: 1000,
    ride: 'carousel'
  })
})

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


"main": "dist/js/bootstrap.js"

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


import 'bootstrap/dist/js/bootstrap.js'

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!

PreviousWebpack từ A đến Á: Webpack import jQuery (ok)NextWebpack từ A đến Á: Webpack import jQuery - Materialize

Last updated

Navigation

Lionel

@Copyright 2023