# \[WEBPACK] Webpack import jQuery - Bootstrap (ok)
## Webpack từ A đến Á: Webpack import jQuery - Bootstrap
[CSS](https://viblo.asia/tags/css)[HTML](https://viblo.asia/tags/html)[JavaScript](https://viblo.asia/tags/javascript)[Webpack](https://viblo.asia/tags/webpack)
Bài [trước](https://viblo.asia/p/webpack-tu-a-den-a-webpack-load-jquery-XL6lA94rlek) 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](https://getbootstrap.com/) phiên bản 4x.
### 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`
```
Webpack từ A đến Á cùng kentrung
Example headline.
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.
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.
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.
```
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`
```
$(document).ready(function(){
$('.carousel').carousel({
interval: 1000,
ride: 'carousel'
})
})
```
Đ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:
```
Uncaught ReferenceError: $ is not defined at (main.js:1)
```
### 2. Load jQuery
Bài [trước](https://viblo.asia/p/webpack-tu-a-den-a-webpack-load-jquery-XL6lA94rlek) đã 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ì ở màn `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](https://popper.js.org/) 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'
```
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:
* Sourcode github:
* Series webpack:
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://javascriptuse.gitbook.io/advanced/webpack-import-jquery-bootstrap-ok.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.