Chuyển đến nội dung chính Chuyển đến điều hướng tài liệu
Check
in English

Bootstrap & Webpack

Hướng dẫn chính thức về cách bao gồm và gói CSS và JavaScript của Bootstrap trong dự án của bạn bằng cách sử dụng Webpack.

Trên trang này
Bạn muốn bỏ qua đến cuối? Tải xuống mã nguồn và bản trình diễn hoạt động cho hướng dẫn này từ kho twbs / ví dụ . Bạn cũng có thể mở ví dụ trong StackBlitz để chỉnh sửa trực tiếp.

Thành lập

Chúng tôi đang xây dựng một dự án Webpack với Bootstrap từ đầu, vì vậy có một số điều kiện tiên quyết và các bước trước khi chúng tôi thực sự có thể bắt đầu. Hướng dẫn này yêu cầu bạn phải cài đặt Node.js và một số thông tin quen thuộc với thiết bị đầu cuối.

  1. Tạo một thư mục dự án và thiết lập npm. Chúng tôi sẽ tạo my-projectthư mục và khởi tạo npm với -yđối số để tránh nó hỏi chúng tôi tất cả các câu hỏi tương tác.

    mkdir my-project && cd my-project
npm init -y

  2. Cài đặt Webpack. Tiếp theo, chúng ta cần cài đặt các phụ thuộc phát triển Webpack: webpackđối với lõi của Webpack, webpack-clivì vậy chúng ta có thể chạy các lệnh Webpack từ thiết bị đầu cuối và webpack-dev-serverdo đó chúng ta có thể chạy một máy chủ phát triển cục bộ. Chúng tôi sử dụng --save-devđể báo hiệu rằng những phụ thuộc này chỉ dành cho mục đích phát triển chứ không phải cho sản xuất.

    npm i --save-dev webpack webpack-cli webpack-dev-server

  3. Cài đặt Bootstrap. Bây giờ chúng ta có thể cài đặt Bootstrap. Chúng tôi cũng sẽ cài đặt Popper vì trình đơn thả xuống, cửa sổ bật lên và chú giải công cụ của chúng tôi phụ thuộc vào nó để xác định vị trí của chúng. Nếu bạn không có kế hoạch sử dụng các thành phần đó, bạn có thể bỏ qua Popper ở đây.

    npm i --save bootstrap @popperjs/core

  4. Cài đặt các phụ thuộc bổ sung. Ngoài Webpack và Bootstrap, chúng ta cần thêm một số phụ thuộc để nhập và đóng gói CSS và JS của Bootstrap với Webpack một cách chính xác. Chúng bao gồm Sass, một số trình tải và Trình sửa lỗi tự động.

    npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader

Bây giờ chúng ta đã cài đặt tất cả các phụ thuộc cần thiết, chúng ta có thể bắt đầu tạo các tệp dự án và nhập Bootstrap.

Cấu trúc dự án

Chúng tôi đã tạo my-projectthư mục và khởi tạo npm. Bây giờ chúng ta cũng sẽ tạo các thư mục srcvà của chúng ta distđể hoàn thiện cấu trúc dự án. Chạy phần sau từ my-projecthoặc tạo cấu trúc thư mục và tệp theo cách thủ công được hiển thị bên dưới.

mkdir {dist,src,src/js,src/scss}
touch dist/index.html src/js/main.js src/scss/styles.scss webpack.config.js

Khi bạn hoàn thành, dự án hoàn chỉnh của bạn sẽ trông như thế này:

my-project/
├── dist/
│   └── index.html
├── src/
│   ├── js/
│   │   └── main.js
│   └── scss/
│       └── styles.scss
├── package-lock.json
├── package.json
└── webpack.config.js

Tại thời điểm này, mọi thứ đã ở đúng vị trí, nhưng Webpack sẽ không hoạt động vì chúng tôi chưa điền vào webpack.config.js.

Định cấu hình Webpack

Với các phần phụ thuộc được cài đặt và thư mục dự án của chúng tôi đã sẵn sàng để chúng tôi bắt đầu viết mã, giờ đây chúng tôi có thể cấu hình Webpack và chạy dự án của chúng tôi cục bộ.

  1. Mở webpack.config.jstrong trình chỉnh sửa của bạn. Vì nó trống, chúng tôi sẽ cần thêm một số cấu hình boilerplate vào nó để chúng tôi có thể khởi động máy chủ của mình. Phần này của cấu hình nói với Webpack phải tìm kiếm JavaScript của dự án của chúng tôi, nơi xuất mã đã biên dịch sang ( dist) và cách máy chủ phát triển sẽ hoạt động (kéo từ distthư mục với tải lại nóng).

    const path = require('path')

module.exports = {
  entry: './src/js/main.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 8080,
    hot: true
  }
}

  2. Tiếp theo, chúng tôi điền vào của chúng tôi dist/index.html. Đây là trang HTML mà Webpack sẽ tải trong trình duyệt để sử dụng CSS và JS đi kèm mà chúng tôi sẽ thêm vào nó trong các bước sau. Trước khi chúng ta có thể làm điều đó, chúng ta phải cung cấp cho nó một thứ gì đó để kết xuất và bao gồm outputJS từ bước trước.

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Webpack</title>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Webpack!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
    <script src="./main.js"></script>
  </body>
</html>

    Chúng tôi bao gồm một chút kiểu dáng Bootstrap ở đây với div class="container"và <button>để chúng tôi thấy khi nào CSS của Bootstrap được tải bởi Webpack.

  3. Bây giờ chúng ta cần một tập lệnh npm để chạy Webpack. Mở package.jsonvà thêm starttập lệnh hiển thị bên dưới (bạn đã có tập lệnh thử nghiệm). Chúng tôi sẽ sử dụng tập lệnh này để khởi động máy chủ nhà phát triển Webpack cục bộ của chúng tôi.

    {
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}

  4. Và cuối cùng, chúng ta có thể khởi động Webpack. Từ my-projectthư mục trong thiết bị đầu cuối của bạn, hãy chạy tập lệnh npm mới được thêm vào đó:

    npm start
    Máy chủ nhà phát triển webpack đang chạy

Trong phần tiếp theo và cuối cùng của hướng dẫn này, chúng tôi sẽ thiết lập bộ tải Webpack và nhập tất cả CSS và JavaScript của Bootstrap.

Nhập Bootstrap

Việc nhập Bootstrap vào Webpack yêu cầu bộ nạp mà chúng tôi đã cài đặt trong phần đầu tiên. Chúng tôi đã cài đặt chúng với npm, nhưng bây giờ Webpack cần được định cấu hình để sử dụng chúng.

  1. Thiết lập bộ tải trong webpack.config.js. Tệp cấu hình của bạn hiện đã hoàn tất và phải khớp với đoạn mã bên dưới. Phần mới duy nhất ở đây là modulephần.

    const path = require('path')

module.exports = {
  entry: './src/js/main.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 8080,
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: () => [
                  require('autoprefixer')
                ]
              }
            }
          },
          {
            loader: 'sass-loader'
          }
        ]
      }
    ]
  }
}

    Đây là bản tóm tắt lý do tại sao chúng ta cần tất cả những bộ tải này. style-loaderđưa CSS vào một <style>phần tử trong <head>trang HTML, css-loadergiúp sử dụng @importvà url(), postcss-loaderlà bắt buộc đối với Autoprefixer và sass-loadercho phép chúng tôi sử dụng Sass.

  2. Bây giờ, hãy nhập CSS của Bootstrap. Thêm phần sau vào src/scss/styles.scssđể nhập tất cả Sass nguồn của Bootstrap.

    // Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";

    Bạn cũng có thể nhập từng bảng định kiểu của chúng tôi nếu bạn muốn. Đọc tài liệu nhập Sass của chúng tôi để biết chi tiết.

  3. Tiếp theo, chúng tôi tải CSS và nhập JavaScript của Bootstrap. Thêm phần sau vào src/js/main.jsđể tải CSS và nhập tất cả JS của Bootstrap. Popper sẽ được nhập tự động thông qua Bootstrap.

    // Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'

    Bạn cũng có thể nhập từng plugin JavaScript nếu cần để giảm kích thước gói:

    import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'

    Đọc tài liệu JavaScript của chúng tôi để biết thêm thông tin về cách sử dụng các plugin của Bootstrap.

  4. Và bạn đã hoàn thành! 🎉 Với nguồn Sass và JS của Bootstrap được tải đầy đủ, máy chủ phát triển cục bộ của bạn bây giờ sẽ trông như thế này.

    Máy chủ nhà phát triển webpack chạy với Bootstrap

    Bây giờ bạn có thể bắt đầu thêm bất kỳ thành phần Bootstrap nào bạn muốn sử dụng. Hãy nhớ xem dự án mẫu Webpack hoàn chỉnh để biết cách bao gồm Sass tùy chỉnh bổ sung và tối ưu hóa bản dựng của bạn bằng cách chỉ nhập các phần CSS và JS của Bootstrap mà bạn cần.

Tối ưu hóa sản xuất

Tùy thuộc vào thiết lập của bạn, bạn có thể muốn triển khai một số tối ưu hóa tốc độ và bảo mật bổ sung hữu ích để chạy dự án trong sản xuất. Lưu ý rằng những tối ưu hóa này không được áp dụng trong dự án mẫu Webpack và tùy thuộc vào bạn để thực hiện.

Trích xuất CSS

Chúng style-loadertôi đã định cấu hình ở trên phát ra CSS vào gói một cách thuận tiện để không cần thiết phải tải một tệp CSS theo cách thủ công dist/index.html. Tuy nhiên, cách tiếp cận này có thể không hoạt động với Chính sách bảo mật nội dung nghiêm ngặt và nó có thể trở thành nút thắt cổ chai trong ứng dụng của bạn do kích thước gói lớn.

Để tách CSS để chúng tôi có thể tải trực tiếp từ đó dist/index.html, hãy sử dụng mini-css-extract-loaderplugin Webpack.

Đầu tiên, hãy cài đặt plugin:

npm install --save-dev mini-css-extract-plugin

Sau đó, khởi tạo và sử dụng plugin trong cấu hình Webpack:

--- a/webpack/webpack.config.js
+++ b/webpack/webpack.config.js
@@ -1,8 +1,10 @@
+const miniCssExtractPlugin = require('mini-css-extract-plugin')
 const path = require('path')
 
 module.exports = {
   mode: 'development',
   entry: './src/js/main.js',
+  plugins: [new miniCssExtractPlugin()],
   output: {
     filename: "main.js",
     path: path.resolve(__dirname, "dist"),
@@ -18,8 +20,8 @@ module.exports = {
         test: /\.(scss)$/,
         use: [
           {
-            // Adds CSS to the DOM by injecting a `<style>` tag
-            loader: 'style-loader'
+            // Extracts CSS for each JS file that includes CSS
+            loader: miniCssExtractPlugin.loader
           },
           {

Sau khi chạy npm run buildlại, sẽ có một tệp mới dist/main.css, chứa tất cả CSS được nhập bởi src/js/main.js. Nếu bạn xem dist/index.htmltrong trình duyệt của mình ngay bây giờ, kiểu sẽ bị thiếu, như hiện tại dist/main.css. Bạn có thể bao gồm CSS đã tạo dist/index.htmlnhư sau:

--- a/webpack/dist/index.html
+++ b/webpack/dist/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="./main.css">
     <title>Bootstrap w/ Webpack</title>
   </head>
   <body>

Giải nén tệp SVG

CSS của Bootstrap bao gồm nhiều tham chiếu đến tệp SVG thông qua data:URI nội tuyến. Nếu bạn xác định Chính sách bảo mật nội dung cho dự án của mình chặn data:URI cho hình ảnh, thì các tệp SVG này sẽ không tải. Bạn có thể khắc phục sự cố này bằng cách giải nén các tệp SVG nội tuyến bằng tính năng mô-đun nội dung của Webpack.

Định cấu hình Webpack để giải nén các tệp SVG nội tuyến như sau:

--- a/webpack/webpack.config.js
+++ b/webpack/webpack.config.js
@@ -16,6 +16,14 @@ module.exports = {
   },
   module: {
     rules: [
+      {
+        mimetype: 'image/svg+xml',
+        scheme: 'data',
+        type: 'asset/resource',
+        generator: {
+          filename: 'icons/[hash].svg'
+        }
+      },
       {
         test: /\.(scss)$/,
         use: [

Sau khi chạy npm run buildlại, bạn sẽ tìm thấy các tệp SVG được trích xuất dist/iconsvà tham chiếu đúng cách từ CSS.

Bạn thấy điều gì đó không ổn hoặc lỗi thời ở đây? Vui lòng mở một vấn đề trên GitHub . Cần trợ giúp khắc phục sự cố? Tìm kiếm hoặc bắt đầu thảo luận trên GitHub.