Asosiy tarkibga o'tish Hujjatlar navigatsiyasiga oʻtish
Check
in English

Bootstrap va veb-paket

Webpack yordamida loyihangizga Bootstrap-ning CSS va JavaScript-ni qanday kiritish va to'plash bo'yicha rasmiy qo'llanma.

Ushbu sahifada
Oxirigacha o'tishni xohlaysizmi? Ushbu qo'llanma uchun manba kodini va ish demosini twbs/examples omboridan yuklab oling . Jonli tahrirlash uchun StackBlitz-da misolni ham ochishingiz mumkin .

Sozlash; o'rnatish

Biz noldan boshlab Bootstrap bilan Webpack loyihasini qurmoqdamiz, shuning uchun biz chindan ham boshlashimiz uchun ba'zi bir shartlar va oldingi qadamlar mavjud. Ushbu qo'llanma sizdan Node.js o'rnatilgan bo'lishi va terminal bilan biroz tanish bo'lishingizni talab qiladi.

  1. Loyiha papkasini yarating va npm ni o'rnating. Biz papkani yaratamiz va barcha interaktiv savollarni bermaslik uchun argument my-projectbilan npm ni ishga tushiramiz.-y

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

  2. Webpack-ni o'rnating. Keyin biz Webpackni ishlab chiqishga bog'liqliklarini o'rnatishimiz kerak: Webpack webpackyadrosi uchun, webpack-clibiz terminaldan Webpack buyruqlarini webpack-dev-serverishga tushirishimiz va mahalliy ishlab chiqish serverini ishga tushirishimiz uchun. Biz --save-devushbu bog'liqliklar ishlab chiqarish uchun emas, balki faqat ishlab chiqish uchun ekanligini bildirish uchun foydalanamiz.

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

  3. Bootstrap-ni o'rnating. Endi biz Bootstrap-ni o'rnatishimiz mumkin. Shuningdek, biz Popperni o'rnatamiz, chunki bizning ochiladigan menyular, popoverlar va maslahatlar ularning joylashishiga bog'liq. Agar siz ushbu komponentlardan foydalanishni rejalashtirmasangiz, bu erda Popperni qoldirishingiz mumkin.

    npm i --save bootstrap @popperjs/core

  4. Qo'shimcha bog'liqliklarni o'rnating. Bootstrap-ning CSS va JS-larini Webpack bilan to'g'ri import qilish va to'plash uchun Webpack va Bootstrap-ga qo'shimcha ravishda bizga yana bir nechta bog'liqliklar kerak. Bularga Sass, ba'zi yuklagichlar va Autoprefixer kiradi.

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

Endi bizda barcha kerakli bog'liqliklar o'rnatilgan bo'lsa, biz loyiha fayllarini yaratish va Bootstrap-ni import qilishni boshlashimiz mumkin.

Loyiha tuzilishi

Biz allaqachon my-projectjildni yaratdik va npm ni ishga tushirdik. Endi biz loyiha tuzilmasini yaxlitlash uchun o'zimizning srcva papkalarimizni ham yaratamiz. distdan quyidagilarni ishga tushiring my-projectyoki quyida ko'rsatilgan papka va fayl strukturasini qo'lda yarating.

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

Ishingiz tugagach, to'liq loyihangiz quyidagicha ko'rinishi kerak:

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

Ayni paytda hamma narsa o'z joyida, lekin Webpack ishlamaydi, chunki biz webpack.config.jshali to'ldirmaganmiz.

Webpackni sozlang

O'rnatilgan bog'liqliklar va loyiha papkamiz kodlashni boshlashimiz uchun tayyor bo'lsa, endi biz Webpackni sozlashimiz va loyihamizni mahalliy sifatida ishga tushirishimiz mumkin.

  1. Muharriringizda oching webpack.config.js. U bo'sh bo'lgani uchun serverimizni ishga tushirishimiz uchun unga ba'zi qozon konfiguratsiyasini qo'shishimiz kerak bo'ladi. Konfiguratsiyaning ushbu qismi Webpack-ga loyihamizning JavaScript-ni qidirishi, kompilyatsiya qilingan kodni qayerda ( dist) ga chiqarishi va ishlab chiqish serveri qanday ishlashi kerakligi ( distqayta yuklangan papkadan olib tashlash) kerakligini aytadi.

    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. Keyin biz o'zimizni to'ldiramiz dist/index.html. Bu CSS va JS-dan foydalanish uchun veb-paket brauzerga yuklanadigan HTML-sahifa bo'lib, biz unga keyingi bosqichlarda qo'shamiz. Buni qilishdan oldin, biz unga ko'rsatish uchun biror narsa berishimiz va outputoldingi bosqichdagi JS ni kiritishimiz kerak.

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

    div class="container"Bootstrap-ning CSS-ni qachon Webpack tomonidan yuklanganligini ko'rishimiz uchun <button>biz bu erda bir oz Bootstrap uslubini qo'shmoqdamiz.

  3. Endi Webpackni ishga tushirish uchun bizga npm skripti kerak. Quyida ko'rsatilgan skriptni oching package.jsonva qo'shing start(sizda allaqachon sinov skripti bo'lishi kerak). Biz ushbu skriptdan mahalliy Webpack dev serverimizni ishga tushirish uchun foydalanamiz.

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

  4. Va nihoyat, biz Webpackni ishga tushirishimiz mumkin. my-projectTerminalingizdagi papkadan yangi qo'shilgan npm skriptini ishga tushiring :

    npm start
    Webpack dev server ishlamoqda

Ushbu qo'llanmaning keyingi va oxirgi qismida biz Webpack yuklagichlarini o'rnatamiz va barcha Bootstrap CSS va JavaScript-ni import qilamiz.

Bootstrap import

Bootstrap-ni Webpack-ga import qilish biz birinchi bo'limda o'rnatgan yuklagichlarni talab qiladi. Biz ularni npm bilan o'rnatdik, ammo endi Webpack ulardan foydalanish uchun sozlanishi kerak.

  1. Yuklagichlarni o'rnating webpack.config.js. Konfiguratsiya faylingiz tugallandi va u quyidagi parchaga mos kelishi kerak. Bu erda yagona yangi qism - bu modulebo'lim.

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

    Mana nima uchun bizga bu yuklagichlar kerakligi haqida qisqacha ma'lumot. style-loaderCSS -ni HTML sahifasidagi <style>elementga kiritadi, va dan foydalanishda yordam beradi , Autoprefixer uchun talab qilinadi va Sass-dan foydalanishga imkon beradi.<head>css-loader@importurl()postcss-loadersass-loader

  2. Keling, Bootstrap CSS-ni import qilaylik. src/scss/styles.scssBootstrap-ning barcha Sass manbasini import qilish uchun quyidagilarni qo'shing .

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

    Agar xohlasangiz, uslublar jadvallarini alohida import qilishingiz mumkin. Tafsilotlar uchun Sass import hujjatlarini o'qing .

  3. Keyin biz CSS-ni yuklaymiz va Bootstrap-ning JavaScript-ni import qilamiz. src/js/main.jsCSS-ni yuklash va Bootstrap-ning barcha JS-larini import qilish uchun quyidagilarni qo'shing . Popper avtomatik ravishda Bootstrap orqali import qilinadi.

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

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

    Toʻplam oʻlchamlarini kamaytirish uchun JavaScript plaginlarini alohida import qilishingiz mumkin:

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

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

    Bootstrap plaginlaridan qanday foydalanish haqida ko'proq ma'lumot olish uchun JavaScript hujjatlarini o'qing .

  4. Va siz tugatdingiz! 🎉 Bootstrap manbasi Sass va JS toʻliq yuklangan boʻlsa, mahalliy ishlab chiqish serveringiz endi shunday koʻrinishi kerak.

    Bootstrap bilan ishlaydigan Webpack dev serveri

    Endi siz foydalanmoqchi bo'lgan har qanday Bootstrap komponentlarini qo'shishni boshlashingiz mumkin. Qo'shimcha maxsus Sassni qanday kiritish va faqat Bootstrap CSS va JS qismlarini import qilish orqali tuzilmangizni optimallashtirish haqida to'liq Webpack misol loyihasini ko'rib chiqing.

Ishlab chiqarishni optimallashtirish

O'rnatishingizga qarab, loyihani ishlab chiqarishda ishlatish uchun foydali bo'lgan qo'shimcha xavfsizlik va tezlikni optimallashtirishni amalga oshirishni xohlashingiz mumkin. E'tibor bering, ushbu optimallashtirishlar Webpack misol loyihasida qo'llanilmaydi va ularni amalga oshirish sizga bog'liq.

CSS dan chiqarilmoqda

Biz style-loaderyuqorida sozlaganimiz CSS-ni to'plamga qulay tarzda chiqaradi, shuning uchun CSS faylini qo'lda yuklash dist/index.htmlshart emas. Biroq, bu yondashuv qat'iy Kontent xavfsizligi siyosati bilan ishlamasligi mumkin va bu to'plamning kattaligi tufayli ilovangizda to'siq bo'lib qolishi mumkin.

CSS-ni to'g'ridan-to'g'ri dan yuklashimiz uchun ajratish uchun Webpack plaginidan dist/index.htmlfoydalaning .mini-css-extract-loader

Birinchidan, plaginni o'rnating:

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

Keyin Webpack konfiguratsiyasida plaginni ishga tushiring va foydalaning:

--- 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
           },
           {

Qayta ishga tushirilgandan so'ng , tomonidan import qilingan barcha CSS-larni o'z ichiga olgan npm run buildyangi fayl paydo bo'ladi . Agar siz hozir brauzeringizda ko'rsangiz, uslub hozirda bo'lgani kabi yo'qoladi . Yaratilgan CSS-ni quyidagi tarzda kiritishingiz mumkin :dist/main.csssrc/js/main.jsdist/index.htmldist/main.cssdist/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 fayllarni chiqarish

data:Bootstrap-ning CSS-da inline URI -lar orqali SVG fayllariga bir nechta havolalar mavjud . Agar siz loyihangiz data:uchun tasvirlar uchun URI-larni bloklaydigan Kontent xavfsizligi siyosatini belgilasangiz, bu SVG fayllari yuklanmaydi. Ushbu muammoni Webpack aktiv modullari xususiyatidan foydalanib, ichki SVG fayllarini chiqarib olishingiz mumkin.

Quyidagi kabi ichki SVG fayllarni chiqarish uchun Webpackni sozlang:

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

Qayta ishga tushirgandan so'ng , siz CSS-ga chiqarilgan va to'g'ri havola qilingan npm run buildSVG fayllarini topasiz .dist/icons

Bu yerda notoʻgʻri yoki eskirgan narsani koʻrdingizmi? Iltimos , GitHub da muammoni oching . Muammolarni bartaraf etishda yordam kerakmi? GitHub-da qidiring yoki muhokama boshlang .