ข้ามไปที่เนื้อหาหลัก ข้ามไปที่การนำทางเอกสาร
Check
in English

Bootstrap & Webpack

คู่มืออย่างเป็นทางการสำหรับวิธีรวมและรวม CSS และ JavaScript ของ Bootstrap ในโครงการของคุณโดยใช้ Webpack

ในหน้านี้
ต้องการข้ามไปยังจุดสิ้นสุด? ดาวน์โหลดซอร์สโค้ดและการสาธิตการใช้งานสำหรับคู่มือนี้จากที่ เก็บtwbs/examples คุณยังสามารถ เปิดตัวอย่างใน StackBlitzเพื่อแก้ไขแบบสดได้

ติดตั้ง

เรากำลังสร้างโครงการ Webpack ด้วย Bootstrap ตั้งแต่เริ่มต้น ดังนั้นจึงมีข้อกำหนดเบื้องต้นบางประการและขั้นตอนเบื้องต้นก่อนที่เราจะเริ่มต้นได้จริงๆ คู่มือนี้กำหนดให้คุณต้องติดตั้ง Node.js และความคุ้นเคยกับเทอร์มินัล

  1. สร้างโฟลเดอร์โครงการและตั้งค่า npm เราจะสร้างmy-projectโฟลเดอร์และเริ่มต้น npm ด้วย-yอาร์กิวเมนต์เพื่อหลีกเลี่ยงไม่ให้ถามคำถามแบบโต้ตอบทั้งหมดกับเรา

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

  2. ติดตั้ง Webpack ต่อไป เราต้องติดตั้งการพึ่งพาการพัฒนา Webpack: webpackสำหรับแกนหลักของ Webpack webpack-cliเพื่อให้เราสามารถเรียกใช้คำสั่ง Webpack จากเทอร์มินัล และwebpack-dev-serverเพื่อให้เราสามารถเรียกใช้เซิร์ฟเวอร์การพัฒนาในพื้นที่ เราใช้--save-devเพื่อส่งสัญญาณว่าการพึ่งพาเหล่านี้มีไว้เพื่อใช้ในการพัฒนาเท่านั้น ไม่ใช่สำหรับการผลิต

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

  3. ติดตั้ง Bootstrap ตอนนี้เราสามารถติดตั้ง Bootstrap นอกจากนี้เรายังจะติดตั้ง Popper เนื่องจากดรอปดาวน์ ป๊อปโอเวอร์ และคำแนะนำเครื่องมือของเราขึ้นอยู่กับการวางตำแหน่ง หากคุณไม่ได้วางแผนที่จะใช้ส่วนประกอบเหล่านั้น คุณสามารถละเว้น Popper ได้ที่นี่

    npm i --save bootstrap @popperjs/core

  4. ติดตั้งการพึ่งพาเพิ่มเติม นอกจาก Webpack และ Bootstrap เราจำเป็นต้องมีการพึ่งพาเพิ่มเติมอีกสองสามรายการเพื่อนำเข้าและรวม CSS และ JS ของ Bootstrap กับ Webpack อย่างเหมาะสม ซึ่งรวมถึง Sass ตัวโหลดบางตัวและตัวแก้ไขอัตโนมัติ

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

ตอนนี้เราได้ติดตั้งการพึ่งพาที่จำเป็นทั้งหมดแล้ว เราจึงเริ่มสร้างไฟล์โครงการและนำเข้า Bootstrap ได้

โครงสร้างโครงการ

เราได้สร้างmy-projectโฟลเดอร์และเริ่มต้น npm แล้ว ตอนนี้เราจะสร้างsrcและdistโฟลเดอร์ของเราเพื่อปัดเศษโครงสร้างโครงการ เรียกใช้สิ่งต่อไปนี้จากmy-projectหรือสร้างโฟลเดอร์และโครงสร้างไฟล์ด้วยตนเองตามที่แสดงด้านล่าง

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

เมื่อเสร็จแล้ว โปรเจ็กต์ที่สมบูรณ์ของคุณควรมีลักษณะดังนี้:

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

ณ จุดนี้ทุกอย่างมาถูกที่แล้ว แต่ Webpack จะไม่ทำงานเพราะเรายังไม่ได้กรอกข้อมูลของwebpack.config.jsเรา

กำหนดค่า Webpack

เมื่อติดตั้งการพึ่งพาและโฟลเดอร์โปรเจ็กต์ของเราพร้อมให้เราเริ่มเขียนโค้ดแล้ว ตอนนี้เราสามารถกำหนดค่า Webpack และเรียกใช้โปรเจ็กต์ของเราในเครื่องได้

  1. เปิดwebpack.config.jsในโปรแกรมแก้ไขของคุณ เนื่องจากว่างเปล่า เราจึงต้องเพิ่มการกำหนดค่าสำเร็จรูปเพื่อให้เราสามารถเริ่มต้นเซิร์ฟเวอร์ของเราได้ ส่วนกำหนดค่าส่วนนี้บอกให้ Webpack มองหา JavaScript ของโปรเจ็กต์ของเรา ตำแหน่งที่จะส่งออกโค้ดที่คอมไพล์ไปที่ ( dist) และวิธีที่เซิร์ฟเวอร์การพัฒนาควรทำงาน (ดึงจากdistโฟลเดอร์ที่มีการโหลดซ้ำแบบด่วน)

    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. ต่อไปเรากรอกข้อมูลของเราdist/index.html. นี่คือหน้า HTML ที่ Webpack จะโหลดในเบราว์เซอร์เพื่อใช้ CSS และ JS ที่รวมเข้าด้วยกันที่เราจะเพิ่มลงในขั้นตอนต่อไป ก่อนที่เราจะสามารถทำได้ เราต้องให้บางสิ่งบางอย่างเพื่อแสดงผลและรวมoutputJS จากขั้นตอนก่อนหน้านี้

    <!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>

    เรากำลังรวมสไตล์ Bootstrap ไว้ที่นี่ด้วยdiv class="container"และ<button>เพื่อให้เราเห็นเมื่อ Webpack โหลด CSS ของ Bootstrap

  3. ตอนนี้เราต้องการสคริปต์ npm เพื่อเรียกใช้ Webpack เปิดpackage.jsonและเพิ่มstartสคริปต์ที่แสดงด้านล่าง (คุณควรมีสคริปต์ทดสอบแล้ว) เราจะใช้สคริปต์นี้เพื่อเริ่มเซิร์ฟเวอร์ Webpack dev ภายในเครื่อง

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

  4. และสุดท้าย เราสามารถเริ่ม Webpack ได้ จากmy-projectโฟลเดอร์ในเทอร์มินัลของคุณ ให้รันสคริปต์ npm ที่เพิ่มใหม่:

    npm start
    เซิร์ฟเวอร์ Webpack dev ทำงานอยู่

ในส่วนถัดไปและท้ายสุดของคู่มือนี้ เราจะตั้งค่าตัวโหลด Webpack และนำเข้า CSS และ JavaScript ของ Bootstrap ทั้งหมด

นำเข้า Bootstrap

การนำเข้า Bootstrap ไปยัง Webpack จำเป็นต้องมีตัวโหลดที่เราติดตั้งไว้ในส่วนแรก เราได้ติดตั้งด้วย npm แต่ตอนนี้ Webpack จำเป็นต้องได้รับการกำหนดค่าเพื่อใช้งาน

  1. ตั้งค่าตัวโหลดในwebpack.config.js. ไฟล์การกำหนดค่าของคุณเสร็จสมบูรณ์แล้ว และควรตรงกับข้อมูลโค้ดด้านล่าง ส่วนใหม่เท่านั้นที่นี่คือmoduleส่วน

    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'
          }
        ]
      }
    ]
  }
}

    นี่คือบทสรุปว่าทำไมเราถึงต้องการรถตักดินเหล่านี้ style-loaderแทรก CSS ลงใน<style>องค์ประกอบใน<head>หน้า HTML css-loaderช่วยในการใช้และ@importจำเป็นสำหรับ Autoprefixer และช่วยให้เราใช้ Sass ได้url()postcss-loadersass-loader

  2. ตอนนี้ มานำเข้า CSS ของ Bootstrap กัน เพิ่มสิ่งต่อไปนี้src/scss/styles.scssเพื่อนำเข้า Sass ต้นทางของ Bootstrap ทั้งหมด

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

    คุณยังสามารถนำเข้าสไตล์ชีตของเราทีละรายการได้หากต้องการ อ่านเอกสารนำเข้า Sass ของเราสำหรับรายละเอียด

  3. ต่อไปเราจะโหลด CSS และนำเข้า JavaScript ของ Bootstrap เพิ่มสิ่งต่อไปนี้src/js/main.jsเพื่อโหลด CSS และนำเข้า JS ของ Bootstrap ทั้งหมด Popper จะถูกนำเข้าโดยอัตโนมัติผ่าน Bootstrap

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

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

    คุณยังสามารถนำเข้าปลั๊กอิน JavaScript ทีละรายการได้ตามต้องการเพื่อลดขนาดบันเดิล:

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

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

    อ่านเอกสาร JavaScript ของเราสำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้ปลั๊กอินของ Bootstrap

  4. และคุณทำเสร็จแล้ว! 🎉ด้วย Sass และ JS ต้นทางของ Bootstrap ที่โหลดเต็มแล้ว เซิร์ฟเวอร์การพัฒนาในพื้นที่ของคุณควรมีลักษณะดังนี้

    เซิร์ฟเวอร์ Webpack dev ที่ทำงานด้วย Bootstrap

    ตอนนี้คุณสามารถเริ่มเพิ่มส่วนประกอบ Bootstrap ที่คุณต้องการใช้ อย่าลืมดูโปรเจ็กต์ตัวอย่าง Webpack ฉบับสมบูรณ์เพื่อดูวิธีรวม Sass ที่กำหนดเองเพิ่มเติมและเพิ่มประสิทธิภาพบิลด์ของคุณโดยนำเข้าเฉพาะส่วนของ CSS และ JS ของ Bootstrap ที่คุณต้องการ

การเพิ่มประสิทธิภาพการผลิต

ขึ้นอยู่กับการตั้งค่าของคุณ คุณอาจต้องการใช้การรักษาความปลอดภัยเพิ่มเติมและการปรับความเร็วให้เหมาะสมซึ่งเป็นประโยชน์สำหรับการรันโครงการในการผลิต โปรดทราบว่าการปรับให้เหมาะสมเหล่านี้ไม่ได้ใช้กับโปรเจ็กต์ตัวอย่าง Webpackและขึ้นอยู่กับคุณที่จะนำไปใช้

กำลังแยก CSS

การ กำหนดค่าที่เรากำหนดไว้ข้างต้นจะปล่อย CSS ลงในบันเดิลโดยสะดวก ดังนั้นจึง ไม่จำเป็นต้องstyle-loaderโหลดไฟล์ CSS ด้วยตนเอง dist/index.htmlแนวทางนี้อาจใช้ไม่ได้กับนโยบายการรักษาความปลอดภัยของเนื้อหาที่เข้มงวด และอาจกลายเป็นคอขวดในแอปพลิเคชันของคุณเนื่องจากขนาดบันเดิลที่ใหญ่

หากต้องการแยก CSS เพื่อให้เราสามารถโหลดได้โดยตรงจากdist/index.htmlให้ใช้mini-css-extract-loaderปลั๊กอิน Webpack

ขั้นแรก ติดตั้งปลั๊กอิน:

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

จากนั้นสร้างอินสแตนซ์และใช้ปลั๊กอินในการกำหนดค่า 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
           },
           {

หลังจากรันnpm run buildอีกครั้งจะมีไฟล์ใหม่dist/main.cssซึ่งจะมี CSS ทั้งหมดที่นำเข้าโดยsrc/js/main.js. หากคุณดูdist/index.htmlในเบราว์เซอร์ของคุณตอนนี้ สไตล์จะหายไปเหมือนในdist/main.css. คุณสามารถรวม CSS ที่สร้างขึ้นในdist/index.htmlลักษณะนี้:

--- 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>

กำลังแยกไฟล์ SVG

CSS ของ Bootstrap มีการอ้างอิงหลายไฟล์ไปยังไฟล์ SVG ผ่านdata:URI แบบอินไลน์ หากคุณกำหนดนโยบายการรักษาความปลอดภัยของเนื้อหาสำหรับโปรเจ็กต์ของคุณที่บล็อกdata:URI สำหรับรูปภาพ ไฟล์ SVG เหล่านี้จะไม่โหลด คุณสามารถแก้ไขปัญหานี้ได้โดยแยกไฟล์ SVG แบบอินไลน์โดยใช้คุณสมบัติโมดูลสินทรัพย์ของ Webpack

กำหนดค่า Webpack เพื่อแยกไฟล์ SVG แบบอินไลน์ดังนี้:

--- 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: [

หลังจากเรียกใช้npm run buildอีกครั้ง คุณจะพบไฟล์ SVG ที่แยกออกมาdist/iconsและอ้างอิงจาก CSS อย่างเหมาะสม

เห็นสิ่งผิดปกติหรือล้าสมัยที่นี่? กรุณาเปิดปัญหาบน GitHub ต้องการความช่วยเหลือในการแก้ไขปัญหา? ค้นหาหรือเริ่มการสนทนาบน GitHub