Негізгі мазмұнға өту Құжаттар шарлауына өту
Check
in English

Жүктеу және веб-пакет

Webpack көмегімен жобаңызға Bootstrap CSS және JavaScript қосу және жинақтау туралы ресми нұсқаулық.

Бұл бетте
Соңына дейін өткізгіңіз келе ме? Бұл нұсқаулықтың бастапқы кодын және жұмыс демонстрациясын twbs/examples репозиторийінен жүктеп алыңыз . Сондай-ақ , мысалды тікелей өңдеу үшін StackBlitz бағдарламасында ашуға болады.

Орнату

Біз Bootstrap көмегімен Webpack жобасын нөлден бастап жасап жатырмыз, сондықтан біз шынымен бастау үшін кейбір алғышарттар мен алдыңғы қадамдар бар. Бұл нұсқаулық сізден 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 бағдарламасын орната аламыз. Сондай-ақ біз Попперді орнатамыз, өйткені ашылмалы тізімдер, қалқымалы тізімдер және құралдар кеңестері олардың орналасуына байланысты. Егер сіз бұл құрамдастарды пайдалануды жоспарламасаңыз, Попперді осында өткізбеуіңізге болады.

    npm i --save bootstrap @popperjs/core

  4. Қосымша тәуелділіктерді орнатыңыз. Webpack және Bootstrap-ке қоса, Bootstrap CSS және JS-ін Webpack-пен бірге дұрыс импорттау және жинақтау үшін бізге тағы бірнеше тәуелділіктер қажет. Оларға Sass, кейбір жүктеушілер және Autoprefixer кіреді.

    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. Бұл жинақталған CSS және JS пайдалану үшін веб-пакет браузерге жүктелетін HTML беті, біз оған кейінгі қадамдарда қосамыз. Мұны жасамас бұрын, біз оған көрсету үшін бірдеңе беріп output, алдыңғы қадамдағы JS қосуымыз керек.

    <!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>Bootstrap CSS-і Webpack арқылы қашан жүктелетінін көреміз.

  3. Енді Webpack іске қосу үшін бізге npm сценарийі қажет. Төменде көрсетілген сценарийді ашыңыз package.jsonжәне қосыңыз start(сізде сынақ сценарийі болуы керек). Бұл сценарийді жергілікті Webpack әзірлеу серверін іске қосу үшін қолданамыз.

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

  4. Соңында біз Webpack іске қоса аламыз. Терминалдағы my-projectқалтадан жаңадан қосылған npm сценарийін іске қосыңыз:

    npm start
    Webpack әзірлеу сервері жұмыс істейді

Осы нұсқаулықтың келесі және соңғы бөлімінде біз Webpack жүктеушілерін орнатамыз және барлық Bootstrap CSS және JavaScript импорттаймыз.

Bootstrap импорттау

Webpack ішіне Bootstrap импорттау үшін бірінші бөлімде орнатқан жүктегіштер қажет. Біз оларды 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'
          }
        ]
      }
    ]
  }
}

    Міне, осы жүктегіштердің барлығы не үшін қажет екендігінің қысқаша мазмұны. HTML бетіндегі элементке style-loaderCSS енгізеді, және пайдалануға көмектеседі, Autoprefixer үшін қажет және Sass пайдалануымызға мүмкіндік береді.<style><head>css-loader@importurl()postcss-loadersass-loader

  2. Енді Bootstrap CSS импорттайық. src/scss/styles.scssБарлық Bootstrap Sass көзін импорттау үшін келесіні қосыңыз .

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

    Қаласаңыз, стиль кестелерімізді жеке импорттай аласыз. Толық ақпарат алу үшін Sass импорттау құжаттарын оқыңыз .

  3. Содан кейін біз CSS жүктейміз және Bootstrap JavaScript-ін импорттаймыз. src/js/main.jsCSS жүктеу және барлық Bootstrap JS импорттау үшін келесіні қосыңыз . Поппер 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'

    Bootstrap плагиндерін пайдалану туралы қосымша ақпарат алу үшін біздің JavaScript құжаттарын оқыңыз .

  4. Ал сіз бітірдіңіз! 🎉 Bootstrap көзі Sass және JS толық жүктелген кезде жергілікті әзірлеу сервері енді осылай болуы керек.

    Bootstrap көмегімен жұмыс істейтін Webpack әзірлеу сервері

    Енді сіз пайдаланғыңыз келетін кез келген Bootstrap құрамдастарын қосуды бастай аласыз. Қосымша теңшелетін Sass қосу және сізге қажет Bootstrap CSS және JS бөліктерін ғана импорттау арқылы құрастыруды оңтайландыру үшін толық Webpack мысалы жобасын тексеріңіз .

Өндірісті оңтайландыру

Орнатуыңызға байланысты жобаны өндірісте іске қосу үшін пайдалы кейбір қосымша қауіпсіздік пен жылдамдықты оңтайландыруларды енгізгіңіз келуі мүмкін. Бұл оңтайландырулар Webpack мысал жобасында қолданылмайтынын және оларды орындау сізге байланысты екенін ескеріңіз.

CSS шығарылуда

Жоғарыда style-loaderконфигурациялағанымыз CSS файлын қолмен жүктеп салудың dist/index.htmlқажеті болмас үшін жинаққа CSS-ті ыңғайлы түрде шығарады. Бұл тәсіл қатаң мазмұн қауіпсіздігі саясатымен жұмыс істемеуі мүмкін және ол үлкен пакет өлшеміне байланысты қолданбаңызда кедергі болуы мүмкін.

CSS-ті тікелей ішінен жүктей алатындай етіп бөлу dist/index.htmlүшін mini-css-extract-loaderWebpack плагинін пайдаланыңыз.

Алдымен плагинді орнатыңыз:

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

Қайтадан іске қосқаннан кейін , арқылы импортталған барлық CSS-ті қамтитын npm run buildжаңа файл пайда болады . Браузеріңізде қазір қарасаңыз, стиль қазірдегідей жоқ болады . Жасалған CSS-ті келесідей қосуға болады :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 файлдарын шығару

data:Bootstrap CSS жүйесі кірістірілген URI арқылы SVG файлдарына бірнеше сілтемелерді қамтиды . Кескіндерге арналған URI кодтарын блоктайтын жобаңыз үшін Мазмұн қауіпсіздігі саясатын анықтасаңыз, data:бұл SVG файлдары жүктелмейді. Webpack актив модульдері мүмкіндігін пайдаланып кірістірілген SVG файлдарын шығару арқылы бұл мәселені шешуге болады.

Мынадай кірістірілген SVG файлдарын шығару үшін Webpack конфигурациялаңыз:

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

Қайта іске қосқаннан кейін сіз CSS ішінен шығарылған және дұрыс сілтеме жасалған npm run buildSVG файлдарын табасыз .dist/icons

Мұнда дұрыс емес немесе ескірген бірдеңені көрдіңіз бе? GitHub сайтында мәселені ашыңыз . Ақаулықтарды жоюғ�� көмек керек пе? GitHub сайтында іздеу немесе талқылауды бастау .