Langkau ke kandungan utama Langkau ke navigasi dokumen
Check
in English

Bootstrap & Webpack

Panduan rasmi untuk cara memasukkan dan menggabungkan CSS dan JavaScript Bootstrap dalam projek anda menggunakan Webpack.

Pada halaman ini
Nak skip sampai habis? Muat turun kod sumber dan demo berfungsi untuk panduan ini daripada repositori twbs/contoh . Anda juga boleh membuka contoh dalam StackBlitz untuk penyuntingan langsung.

Persediaan

Kami sedang membina projek Webpack dengan Bootstrap dari awal, jadi terdapat beberapa prasyarat dan langkah hadapan sebelum kami benar-benar boleh bermula. Panduan ini memerlukan anda memasang Node.js dan membiasakan diri dengan terminal.

  1. Buat folder projek dan sediakan npm. Kami akan mencipta my-projectfolder dan memulakan npm dengan -yhujah untuk mengelakkannya bertanya kepada kami semua soalan interaktif.

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

  2. Pasang Webpack. Seterusnya, kami perlu memasang kebergantungan pembangunan Webpack kami: webpackuntuk teras Webpack, webpack-clisupaya kami boleh menjalankan arahan Webpack dari terminal, dan webpack-dev-serversupaya kami boleh menjalankan pelayan pembangunan setempat. Kami gunakan --save-devuntuk memberi isyarat bahawa kebergantungan ini hanya untuk kegunaan pembangunan dan bukan untuk pengeluaran.

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

  3. Pasang Bootstrap. Sekarang kita boleh memasang Bootstrap. Kami juga akan memasang Popper kerana dropdown, popover dan petua alat kami bergantung padanya untuk kedudukannya. Jika anda tidak merancang untuk menggunakan komponen tersebut, anda boleh meninggalkan Popper di sini.

    npm i --save bootstrap @popperjs/core

  4. Pasang kebergantungan tambahan. Selain Webpack dan Bootstrap, kami memerlukan beberapa lagi kebergantungan untuk mengimport dan menggabungkan CSS dan JS Bootstrap dengan betul dengan Webpack. Ini termasuk Sass, beberapa pemuat dan Autoprefixer.

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

Memandangkan kita telah memasang semua kebergantungan yang diperlukan, kita boleh mula bekerja membuat fail projek dan mengimport Bootstrap.

Struktur projek

Kami telah mencipta my-projectfolder dan memulakan npm. Sekarang kami juga akan mencipta folder srcdan kami distuntuk melengkapkan struktur projek. Jalankan yang berikut daripada my-project, atau buat folder dan struktur fail secara manual yang ditunjukkan di bawah.

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

Apabila anda selesai, projek lengkap anda sepatutnya kelihatan seperti ini:

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

Pada ketika ini, semuanya berada di tempat yang betul, tetapi Webpack tidak akan berfungsi kerana kami masih belum mengisinya webpack.config.js.

Konfigurasikan Webpack

Dengan kebergantungan dipasang dan folder projek kami sedia untuk kami memulakan pengekodan, kami kini boleh mengkonfigurasi Webpack dan menjalankan projek kami secara setempat.

  1. Buka webpack.config.jsdalam editor anda. Oleh kerana ia kosong, kami perlu menambahkan beberapa konfigurasi boilerplate padanya supaya kami boleh memulakan pelayan kami. Bahagian konfigurasi ini memberitahu Webpack adalah untuk mencari JavaScript projek kami, tempat untuk mengeluarkan kod yang disusun ke ( dist), dan bagaimana pelayan pembangunan harus bertindak (menarik dari distfolder dengan muat semula panas).

    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. Seterusnya kita mengisi dist/index.html. Ini ialah halaman HTML yang Webpack akan dimuatkan dalam penyemak imbas untuk menggunakan CSS dan JS yang digabungkan yang akan kami tambahkan padanya dalam langkah-langkah seterusnya. Sebelum kita boleh melakukannya, kita perlu memberikan sesuatu untuk dibuat dan memasukkan outputJS dari langkah sebelumnya.

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

    Kami menyertakan sedikit penggayaan Bootstrap di sini dengan div class="container"dan <button>supaya kami melihat apabila CSS Bootstrap dimuatkan oleh Webpack.

  3. Sekarang kita memerlukan skrip npm untuk menjalankan Webpack. Buka package.jsondan tambah startskrip yang ditunjukkan di bawah (anda sepatutnya sudah mempunyai skrip ujian). Kami akan menggunakan skrip ini untuk memulakan pelayan pembangun Webpack tempatan kami.

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

  4. Dan akhirnya, kita boleh mulakan Webpack. Dari my-projectfolder dalam terminal anda, jalankan skrip npm yang baru ditambahkan itu:

    npm start
    Pelayan pembangun Webpack berjalan

Dalam bahagian seterusnya dan terakhir untuk panduan ini, kami akan menyediakan pemuat Webpack dan mengimport semua CSS dan JavaScript Bootstrap.

Import Bootstrap

Mengimport Bootstrap ke dalam Webpack memerlukan pemuat yang kami pasang di bahagian pertama. Kami telah memasangnya dengan npm, tetapi kini Webpack perlu dikonfigurasikan untuk menggunakannya.

  1. Sediakan pemuat dalam webpack.config.js. Fail konfigurasi anda kini lengkap dan sepatutnya sepadan dengan coretan di bawah. Satu-satunya bahagian baru di sini ialah modulebahagian.

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

    Berikut ialah ringkasan mengapa kami memerlukan semua pemuat ini. style-loadermenyuntik CSS ke dalam <style>elemen dalam <head>halaman HTML, css-loadermembantu menggunakan @importdan url(), postcss-loaderdiperlukan untuk Autoprefixer dan sass-loadermembolehkan kami menggunakan Sass.

  2. Sekarang, mari kita import CSS Bootstrap. Tambahkan yang berikut untuk src/scss/styles.scssmengimport semua Sass sumber Bootstrap.

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

    Anda juga boleh mengimport helaian gaya kami secara individu jika anda mahu. Baca dokumen import Sass kami untuk mendapatkan butiran.

  3. Seterusnya kami memuatkan CSS dan mengimport JavaScript Bootstrap. Tambahkan yang berikut untuk src/js/main.jsmemuatkan CSS dan mengimport semua JS Bootstrap. Popper akan diimport secara automatik melalui Bootstrap.

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

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

    Anda juga boleh mengimport pemalam JavaScript secara individu mengikut keperluan untuk mengurangkan saiz berkas:

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

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

    Baca dokumen JavaScript kami untuk mendapatkan maklumat lanjut tentang cara menggunakan pemalam Bootstrap.

  4. Dan anda sudah selesai! 🎉 Dengan sumber Bootstrap Sass dan JS dimuatkan sepenuhnya, pelayan pembangunan tempatan anda kini sepatutnya kelihatan seperti ini.

    Pelayan pembangun Webpack berjalan dengan Bootstrap

    Kini anda boleh mula menambah mana-mana komponen Bootstrap yang anda mahu gunakan. Pastikan anda menyemak projek contoh Webpack yang lengkap untuk cara memasukkan Sass tersuai tambahan dan mengoptimumkan binaan anda dengan mengimport hanya bahagian CSS dan JS Bootstrap yang anda perlukan.

Pengoptimuman pengeluaran

Bergantung pada persediaan anda, anda mungkin mahu melaksanakan beberapa keselamatan tambahan dan pengoptimuman kelajuan yang berguna untuk menjalankan projek dalam pengeluaran. Ambil perhatian bahawa pengoptimuman ini tidak digunakan pada projek contoh Webpack dan terpulang kepada anda untuk melaksanakannya.

Mengekstrak CSS

Yang style-loaderkami konfigurasikan di atas dengan mudah mengeluarkan CSS ke dalam berkas supaya memuatkan fail CSS secara manual dist/index.htmltidak diperlukan. Pendekatan ini mungkin tidak berfungsi dengan Dasar Keselamatan Kandungan yang ketat, walau bagaimanapun, dan ia mungkin menjadi halangan dalam aplikasi anda kerana saiz berkas yang besar.

Untuk memisahkan CSS supaya kami boleh memuatkannya terus daripada dist/index.html, gunakan mini-css-extract-loaderpemalam Webpack.

Pertama, pasang pemalam:

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

Kemudian nyatakan dan gunakan pemalam dalam konfigurasi 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
           },
           {

Selepas berjalan npm run buildsemula, akan ada fail baharu dist/main.css, yang akan mengandungi semua CSS yang diimport oleh src/js/main.js. Jika anda melihat dist/index.htmldalam penyemak imbas anda sekarang, gaya itu akan hilang, kerana ia kini dalam dist/main.css. Anda boleh memasukkan CSS yang dihasilkan dist/index.htmlseperti ini:

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

Mengekstrak fail SVG

CSS Bootstrap termasuk berbilang rujukan kepada fail SVG melalui data:URI sebaris. Jika anda menentukan Dasar Keselamatan Kandungan untuk projek anda yang menyekat data:URI untuk imej, maka fail SVG ini tidak akan dimuatkan. Anda boleh mengatasi masalah ini dengan mengekstrak fail SVG sebaris menggunakan ciri modul aset Webpack.

Konfigurasikan Webpack untuk mengekstrak fail SVG sebaris seperti ini:

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

Selepas berjalan npm run buildsemula, anda akan menemui fail SVG yang diekstrak ke dalam dist/iconsdan dirujuk dengan betul daripada CSS.

Nampak sesuatu yang salah atau ketinggalan zaman di sini? Sila buka isu pada GitHub . Perlukan bantuan menyelesaikan masalah? Cari atau mulakan perbincangan di GitHub.