Luncat ka eusi utama Luncat ka navigasi docs
Check
in English

Bootstrap & Webpack

Pituduh resmi pikeun kumaha carana ngalebetkeun sareng ngabuntel CSS sareng JavaScript Bootstrap dina proyék anjeun nganggo Webpack.

Dina kaca ieu
Rék skip ka tungtungna? Unduh kode sumber sareng demo kerja pikeun pituduh ieu tina gudang twbs/conto . Anjeun ogé tiasa muka conto dina StackBlitz pikeun ngedit langsung.

Disetél

Kami nuju ngawangun proyék Webpack sareng Bootstrap ti mimiti, janten aya sababaraha prasarat sareng léngkah-léngkah sateuacan urang leres-leres tiasa ngamimitian. Pituduh ieu ngabutuhkeun anjeun pikeun masang Node.js sareng sababaraha familiarity sareng terminal.

  1. Jieun folder proyék jeung setelan npm. Kami bakal nyiptakeun my-projectpolder sareng ngamimitian npm kalayan -yargumen pikeun ngahindarkeun naroskeun ka urang sadaya patarosan interaktif.

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

  2. Pasang Webpack. Salajengna urang kedah masang dependensi pamekaran Webpack urang: webpackpikeun inti Webpack, webpack-cliku kituna urang tiasa ngajalankeun paréntah Webpack tina terminal, sareng webpack-dev-serverurang tiasa ngajalankeun server pangembangan lokal. Kami nganggo --save-devsinyal yén kagumantungan ieu ngan ukur pikeun panggunaan pangwangunan sareng sanés pikeun produksi.

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

  3. Pasang Bootstrap. Ayeuna urang tiasa masang Bootstrap. Urang ogé bakal masang Popper saprak dropdowns kami, popovers, sarta tooltips gumantung kana eta pikeun positioning maranéhna. Upami anjeun henteu ngarencanakeun ngagunakeun komponén éta, anjeun tiasa ngaleungitkeun Popper di dieu.

    npm i --save bootstrap @popperjs/core

  4. Pasang kagumantungan tambahan. Salian Webpack sareng Bootstrap, urang peryogi sababaraha deui katergantungan pikeun ngimpor leres sareng ngabuntel CSS sareng JS Bootstrap sareng Webpack. Ieu kalebet Sass, sababaraha loader, sareng Autoprefixer.

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

Ayeuna urang parantos dipasang sadayana katergantungan anu diperyogikeun, urang tiasa damel pikeun nyiptakeun file proyék sareng ngimpor Bootstrap.

Struktur proyék

Kami parantos nyiptakeun my-projectfolder sareng ngamimitian npm. Ayeuna urang ogé bakal nyieun urang srcjeung distpolder pikeun buleud kaluar struktur proyék. Jalankeun di handap ieu tina my-project, atanapi jieun sacara manual polder sareng struktur file anu dipidangkeun di handap.

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

Sawaktos Anjeun geus rengse, proyék lengkep Anjeun kedah kasampak kawas kieu:

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

Dina titik ieu, sadayana aya dina tempat anu leres, tapi Webpack moal jalan sabab kami henteu acan ngeusian webpack.config.js.

Konpigurasikeun Webpack

Kalayan katergantungan dipasang sareng folder proyék kami siap pikeun urang ngamimitian coding, ayeuna urang tiasa ngonpigurasikeun Webpack sareng ngajalankeun proyék urang sacara lokal.

  1. Buka webpack.config.jsdina editor Anjeun. Kusabab éta kosong, urang kedah nambihan sababaraha config boilerplate kana éta supados urang tiasa ngamimitian server kami. Ieu bagian tina config nu ngabejaan Webpack éta néangan JavaScript proyék urang, dimana kaluaran kodeu disusun pikeun ( dist), jeung kumaha server ngembangkeun kedah kalakuanana (narik tina distfolder kalawan ulang 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. Salajengna urang eusian kami dist/index.html. Ieu mangrupikeun halaman HTML Webpack anu bakal dimuat dina browser pikeun ngagunakeun CSS sareng JS anu dibuntel anu bakal kami tambahkeun dina léngkah-léngkah salajengna. Sateuacan urang tiasa ngalakukeun éta, urang kedah masihan hiji hal pikeun ngajantenkeun sareng kalebet outputJS tina léngkah sateuacana.

    <!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 kalebet sakedik gaya Bootstrap di dieu sareng div class="container"sareng <button>supados urang ningali nalika CSS Bootstrap dimuat ku Webpack.

  3. Ayeuna urang peryogi skrip npm pikeun ngajalankeun Webpack. Buka package.jsonsareng tambahkeun startskrip anu dipidangkeun di handap (anjeun kedah gaduh naskah tés). Urang bakal ngagunakeun skrip ieu pikeun ngamimitian server Webpack dev lokal urang.

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

  4. Sarta pamustunganana, urang bisa ngamimitian Webpack. Tina my-projectpolder di terminal anjeun, jalankeun skrip npm anu nembé nambihan:

    npm start
    Webpack dev server ngajalankeun

Dina bagian hareup jeung ahir pituduh ieu, urang bakal nyetél loaders Webpack sarta ngimpor sakabéh CSS jeung JavaScript Bootstrap urang.

Impor Bootstrap

Impor Bootstrap kana Webpack merlukeun loaders kami dipasang dina bagian kahiji. Kami parantos dipasang sareng npm, tapi ayeuna Webpack kedah dikonpigurasi pikeun ngagunakeunana.

  1. Nyetél loaders di webpack.config.js. Berkas konfigurasi anjeun parantos réngsé sareng kedah cocog sareng snippet di handap. Hiji-hijina bagian anyar di dieu nyaéta 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'
          }
        ]
      }
    ]
  }
}

    Ieu recap naha urang peryogi sadaya loader ieu. style-loadernyuntik CSS kana <style>unsur dina <head>kaca HTML, css-loadermantuan kalawan ngagunakeun @importna url(), postcss-loaderdiperlukeun pikeun Autoprefixer, tur sass-loaderngamungkinkeun urang ngagunakeun Sass.

  2. Ayeuna, hayu urang ngimpor CSS Bootstrap. Tambihkeun di handap ieu src/scss/styles.scsspikeun ngimpor sadaya sumber Bootstrap Sass.

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

    Anjeun ogé tiasa ngimpor lambaran gaya urang masing-masing upami anjeun hoyong. Baca dokumén impor Sass kami pikeun detil.

  3. Salajengna urang muka CSS jeung impor Bootstrap urang JavaScript. Tambahkeun di handap pikeun src/js/main.jsmuka CSS jeung ngimpor sakabéh JS Bootstrap urang. Popper bakal diimpor sacara otomatis ngaliwatan Bootstrap.

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

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

    Anjeun ogé tiasa ngimpor plugin JavaScript masing-masing upami diperyogikeun pikeun ngajaga ukuran bungkusan:

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

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

    Baca docs JavaScript kami pikeun émbaran nu langkung lengkep ihwal kumaha cara ngagunakeun plugins Bootstrap.

  4. Jeung anjeun geus rengse! 🎉 Kalayan sumber Bootstrap Sass sareng JS pinuh dimuat, pangladén pangembangan lokal anjeun ayeuna kedah siga kieu.

    Webpack dev server ngajalankeun kalawan Bootstrap

    Ayeuna anjeun tiasa ngamimitian nambihan komponén Bootstrap anu anjeun hoyong dianggo. Pastikeun pikeun pariksa proyék conto Webpack lengkep pikeun kumaha cara ngalebetkeun Sass khusus tambahan sareng ngaoptimalkeun ngawangun anjeun ku ngan ukur ngimpor bagian tina CSS sareng JS Bootstrap anu anjeun peryogikeun.

optimizations produksi

Gumantung kana setelan Anjeun, Anjeun meureun hoyong nerapkeun sababaraha kaamanan tambahan sarta optimizations speed mangpaat pikeun ngajalankeun proyék di produksi. Catet yén optimasi ieu henteu diterapkeun dina proyék conto Webpack sareng terserah anjeun pikeun nerapkeun.

Extracting CSS

Urang style-loaderngonpigurasi di luhur merenah emits CSS kana kebat ku kituna sacara manual loading file CSS di dist/index.htmlteu perlu. Pendekatan ieu tiasa waé henteu tiasa dianggo sareng Kabijakan Kaamanan Kandungan anu ketat, sareng éta tiasa janten bottleneck dina aplikasi anjeun kusabab ukuran bungkusan anu ageung.

Pikeun misahkeun CSS supados urang tiasa ngamuat langsung tina dist/index.html, nganggo mini-css-extract-loaderplugin Webpack.

Mimiti, pasang plugin:

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

Teras instantiate sareng nganggo plugin dina 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
           },
           {

Saatos ngajalankeun npm run builddeui, bakal aya file anyar dist/main.css, nu bakal ngandung sakabéh CSS diimpor ku src/js/main.js. Upami anjeun ningali dist/index.htmldina panyungsi anjeun ayeuna, gayana bakal leungit, sapertos ayeuna di dist/main.css. Anjeun tiasa ngalebetkeun CSS anu dihasilkeun dist/index.htmlsapertos kieu:

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

Extracting file SVG

CSS Bootstrap kalebet sababaraha rujukan kana file SVG via data:URI inline. Upami anjeun netepkeun Kabijakan Kaamanan Kandungan pikeun proyék anjeun anu ngablokir data:URI pikeun gambar, file SVG ieu moal dimuat. Anjeun tiasa ngabéréskeun masalah ieu ku ékstrak file SVG inline nganggo fitur modul aset Webpack.

Konpigurasikeun Webpack pikeun nimba file SVG inline sapertos kieu:

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

Saatos ngajalankeun npm run builddeui, anjeun bakal mendakan file SVG diekstrak dist/iconssareng leres dirujuk tina CSS.

Ningali lepat atanapi ketinggalan jaman di dieu? Mangga buka masalah dina GitHub . Butuh pitulung pikeun ngungkulan? Pilarian atanapi ngamimitian diskusi dina GitHub.