Lewati ke konten utama Lewati ke navigasi dokumen
Check
in English

Bootstrap & Paket Web

Panduan resmi tentang cara memasukkan dan menggabungkan CSS dan JavaScript Bootstrap dalam proyek Anda menggunakan Webpack.

Di halaman ini
Ingin melompat ke akhir? Unduh kode sumber dan demo kerja untuk panduan ini dari repositori twbs/examples . Anda juga dapat membuka contoh di StackBlitz untuk pengeditan langsung.

Mempersiapkan

Kami sedang membangun proyek Webpack dengan Bootstrap dari awal, jadi ada beberapa prasyarat dan langkah awal sebelum kami benar-benar dapat memulai. Panduan ini mengharuskan Anda untuk menginstal Node.js dan beberapa keakraban dengan terminal.

  1. Buat folder proyek dan atur npm. Kami akan membuat my-projectfolder dan menginisialisasi npm dengan -yargumen untuk menghindarinya menanyakan semua pertanyaan interaktif kepada kami.

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

  2. Instal Paket Web. Selanjutnya kita perlu menginstal dependensi pengembangan Webpack kita: webpackuntuk inti Webpack, webpack-clisehingga kita dapat menjalankan perintah Webpack dari terminal, dan webpack-dev-serveragar kita dapat menjalankan server pengembangan lokal. Kami menggunakan --save-devuntuk memberi sinyal bahwa dependensi ini hanya untuk penggunaan pengembangan dan bukan untuk produksi.

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

  3. Instal Bootstrap. Sekarang kita dapat menginstal Bootstrap. Kami juga akan menginstal Popper karena dropdown, popover, dan tooltips kami bergantung padanya untuk pemosisiannya. Jika Anda tidak berencana menggunakan komponen tersebut, Anda dapat menghilangkan Popper di sini.

    npm i --save bootstrap @popperjs/core

  4. Instal dependensi tambahan. Selain Webpack dan Bootstrap, kami memerlukan beberapa dependensi lagi untuk mengimpor dan menggabungkan CSS dan JS Bootstrap dengan Webpack dengan benar. Ini termasuk Sass, beberapa loader, dan Autoprefixer.

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

Sekarang kita telah menginstal semua dependensi yang diperlukan, kita dapat mulai bekerja membuat file proyek dan mengimpor Bootstrap.

Struktur proyek

Kami telah membuat my-projectfolder dan menginisialisasi npm. Sekarang kita juga akan membuat folder srcdan distuntuk melengkapi struktur proyek. Jalankan yang berikut dari my-project, atau secara manual buat folder dan struktur file yang ditunjukkan di bawah ini.

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

Setelah selesai, proyek lengkap Anda akan terlihat seperti ini:

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

Pada titik ini, semuanya berada di tempat yang tepat, tetapi Webpack tidak akan berfungsi karena kami belum mengisinya webpack.config.js.

Konfigurasi Webpack

Dengan dependensi terpasang dan folder proyek kami siap untuk memulai pengkodean, kami sekarang dapat mengonfigurasi Webpack dan menjalankan proyek kami secara lokal.

  1. Buka webpack.config.jsdi editor Anda. Karena kosong, kita perlu menambahkan beberapa konfigurasi boilerplate sehingga kita dapat memulai server kita. Bagian dari konfigurasi ini memberi tahu Webpack untuk mencari JavaScript proyek kami, tempat untuk mengeluarkan kode yang dikompilasi ke ( dist), dan bagaimana server pengembangan harus berperilaku (menarik dari distfolder dengan hot reload).

    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. Selanjutnya kita isi dist/index.html. Ini adalah halaman HTML yang akan dimuat Webpack di browser untuk memanfaatkan CSS dan JS yang dibundel yang akan kami tambahkan di langkah selanjutnya. Sebelum kita bisa melakukannya, kita harus memberikan sesuatu untuk dirender dan menyertakan 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 gaya Bootstrap di sini dengan div class="container"dan <button>agar kami melihat saat CSS Bootstrap dimuat oleh Webpack.

  3. Sekarang kita membutuhkan skrip npm untuk menjalankan Webpack. Buka package.jsondan tambahkan startskrip yang ditunjukkan di bawah ini (Anda seharusnya sudah memiliki skrip pengujian). Kami akan menggunakan skrip ini untuk memulai server dev Webpack lokal kami.

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

  4. Dan akhirnya, kita bisa memulai Webpack. Dari my-projectfolder di terminal Anda, jalankan skrip npm yang baru ditambahkan:

    npm start
    Server pengembang webpack berjalan

Di bagian berikutnya dan terakhir dari panduan ini, kita akan menyiapkan pemuat Webpack dan mengimpor semua CSS dan JavaScript Bootstrap.

Impor Bootstrap

Mengimpor Bootstrap ke Webpack membutuhkan loader yang kami instal di bagian pertama. Kami telah menginstalnya dengan npm, tetapi sekarang Webpack perlu dikonfigurasi untuk menggunakannya.

  1. Siapkan loader di webpack.config.js. File konfigurasi Anda sekarang selesai dan harus cocok dengan cuplikan di bawah ini. Satu-satunya bagian baru di sini adalah modulebagian.

    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 adalah rekap mengapa kita membutuhkan semua loader ini. style-loadermenyuntikkan CSS ke dalam <style>elemen di <head>halaman HTML, css-loadermembantu menggunakan @importdan url(), postcss-loaderdiperlukan untuk Autoprefixer, dan sass-loadermemungkinkan kita menggunakan Sass.

  2. Sekarang, mari impor CSS Bootstrap. Tambahkan yang berikut ini untuk src/scss/styles.scssmengimpor semua sumber Bootstrap Sass.

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

    Anda juga dapat mengimpor stylesheet kami satu per satu jika Anda mau. Baca dokumen impor Sass kami untuk detailnya.

  3. Selanjutnya kita memuat CSS dan mengimpor JavaScript Bootstrap. Tambahkan yang berikut ini untuk src/js/main.jsmemuat CSS dan mengimpor semua JS Bootstrap. Popper akan diimport secara otomatis melalui Bootstrap.

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

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

    Anda juga dapat mengimpor plugin JavaScript satu per satu sesuai kebutuhan untuk menjaga ukuran bundel tetap rendah:

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

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

    Baca dokumen JavaScript kami untuk informasi lebih lanjut tentang cara menggunakan plugin Bootstrap.

  4. Dan Anda sudah selesai! Dengan Sass dan JS sumber Bootstrap terisi penuh, server pengembangan lokal Anda sekarang akan terlihat seperti ini.

    Server dev Webpack berjalan dengan Bootstrap

    Sekarang Anda dapat mulai menambahkan komponen Bootstrap apa pun yang ingin Anda gunakan. Pastikan untuk memeriksa proyek contoh Webpack lengkap tentang cara menyertakan Sass kustom tambahan dan mengoptimalkan build Anda dengan mengimpor hanya bagian CSS dan JS Bootstrap yang Anda butuhkan.

Optimalisasi produksi

Bergantung pada penyiapan Anda, Anda mungkin ingin menerapkan beberapa keamanan tambahan dan pengoptimalan kecepatan yang berguna untuk menjalankan proyek dalam produksi. Perhatikan bahwa pengoptimalan ini tidak diterapkan pada proyek contoh Webpack dan terserah Anda untuk menerapkannya.

Mengekstrak CSS

Yang style-loaderkami konfigurasikan di atas dengan mudah memancarkan CSS ke dalam bundel sehingga memuat file CSS secara manual dist/index.htmltidak diperlukan. Namun, pendekatan ini mungkin tidak berfungsi dengan Kebijakan Keamanan Konten yang ketat, dan mungkin menjadi hambatan dalam aplikasi Anda karena ukuran bundel yang besar.

Untuk memisahkan CSS agar kita dapat memuatnya langsung dari dist/index.html, gunakan mini-css-extract-loaderplugin Webpack.

Pertama, instal plugin:

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

Kemudian instantiate dan gunakan plugin 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
           },
           {

Setelah dijalankan npm run buildkembali, akan ada file baru dist/main.cssyang berisi semua CSS yang diimpor oleh src/js/main.js. Jika Anda melihat dist/index.htmldi browser Anda sekarang, gaya akan hilang, seperti sekarang di dist/main.css. Anda dapat 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 file SVG

CSS Bootstrap menyertakan banyak referensi ke file SVG melalui data:URI sebaris. Jika Anda menentukan Kebijakan Keamanan Konten untuk proyek Anda yang memblokir data:URI untuk gambar, maka file SVG ini tidak akan dimuat. Anda dapat mengatasi masalah ini dengan mengekstrak file SVG sebaris menggunakan fitur modul aset Webpack.

Konfigurasikan Webpack untuk mengekstrak file 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: [

Setelah dijalankan npm run buildkembali, Anda akan menemukan file SVG yang diekstrak dist/iconsdan direferensikan dengan benar dari CSS.

Lihat sesuatu yang salah atau ketinggalan zaman di sini? Silakan buka masalah di GitHub . Butuh bantuan pemecahan masalah? Cari atau mulai diskusi di GitHub.