Пређи на главни садржај Прескочи на навигацију докумената
Check
in English

Боотстрап & Вебпацк

Званични водич за то како да укључите и повежете Боотстрап-ов ЦСС и ЈаваСцрипт у свој пројекат користећи Вебпацк.

На овој страници
Желите да прескочите до краја? Преузмите изворни код и радну демонстрацију за овај водич из твбс/екамплес спремишта . Такође можете отворити пример у СтацкБлитзу за уређивање уживо.

Подесити

Градимо Вебпацк пројекат са Боотстрапом од нуле, тако да постоје неки предуслови и први кораци пре него што заиста почнемо. Овај водич захтева да имате инсталиран Ноде.јс и да сте упознати са терминалом.

  1. Направите фасциклу пројекта и подесите нпм. Направићемо my-projectфасциклу и иницијализовати нпм са -yаргументом како бисмо избегли да нам поставља сва интерактивна питања.

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

  2. Инсталирајте Вебпацк. Затим морамо да инсталирамо наше Вебпацк развојне зависности: webpackза језгро Вебпацк-а, webpack-cliтако да можемо да покрећемо Вебпацк команде са терминала, и webpack-dev-serverтако можемо да покренемо локални развојни сервер. Користимо --save-devда сигнализирамо да су ове зависности само за развојну употребу, а не за производњу.

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

  3. Инсталирајте Боотстрап. Сада можемо да инсталирамо Боотстрап. Такође ћемо инсталирати Поппер пошто наши падајући мении, искачући огласи и описи алата зависе од тога за њихово позиционирање. Ако не планирате да користите те компоненте, овде можете изоставити Попера.

    npm i --save bootstrap @popperjs/core

  4. Инсталирајте додатне зависности. Поред Вебпацк-а и Боотстрапа, потребно нам је још неколико зависности да бисмо правилно увезли и повезали Боотстрап-ове ЦСС и ЈС са Вебпацк-ом. То укључује Сасс, неке учитаваче и Аутопрефикер.

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

Сада када имамо инсталиране све неопходне зависности, можемо да се бавимо креирањем пројектних датотека и увозом Боотстрапа.

Структура пројекта

Већ смо креирали my-projectфасциклу и иницијализовали нпм. Сада ћемо такође креирати наше 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.config.js.

Конфигуришите Вебпацк

Са инсталираним зависностима и нашом фасциклом пројекта спремном за почетак кодирања, сада можемо да конфигуришемо Вебпацк и да покренемо наш пројекат локално.

  1. Отворите webpack.config.jsу свом уређивачу. Пошто је празан, мораћемо да му додамо неку шаблонску конфигурацију да бисмо могли да покренемо наш сервер. Овај део конфигурације говори да Вебпацк треба да тражи ЈаваСцрипт нашег пројекта, где да изведе преведени код у ( 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. Ово је ХТМЛ страница коју ће Вебпацк учитати у претраживач да би користио ЦСС и ЈС који ћемо јој додати у каснијим корацима. Пре него што то урадимо, морамо да му дамо нешто за рендеровање и укључимо outputЈС из претходног корака.

    <!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"и <button>тако да видимо када се Боотстрап ЦСС учитава од стране Вебпацк-а.

  3. Сада нам је потребна нпм скрипта за покретање Вебпацк-а. Отворите package.jsonи додајте startскрипту приказану испод (требало би да већ имате тестну скрипту). Користићемо ову скрипту да покренемо наш локални Вебпацк дев сервер.

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

  4. И коначно, можемо покренути Вебпацк. Из my-projectфасцикле у вашем терминалу покрените ту новододату нпм скрипту:

    npm start
    Вебпацк дев сервер ради

У следећем и последњем одељку овог водича, подесићемо учитаваче веб пакета и увести све Боотстрап-ове ЦСС и ЈаваСцрипт.

Увези Боотстрап

Увоз Боотстрапа у Вебпацк захтева учитаче које смо инсталирали у првом одељку. Инсталирали смо их помоћу нпм-а, али сада Вебпацк треба да се конфигурише да их користи.

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

    Ево резимеа зашто су нам потребни сви ови утоваривачи. style-loaderубацује ЦСС у <style>елемент на <head>ХТМЛ страници, css-loaderпомаже у коришћењу @importи url(), postcss-loaderпотребан је за Аутопрефикер и sass-loaderомогућава нам да користимо Сасс.

  2. Сада, хајде да увеземо Боотстрап-ов ЦСС. Додајте следеће да src/scss/styles.scssбисте увезли све изворне Сасс Боотстрапа.

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

    Такође можете да увезете наше стилове појединачно ако желите. Прочитајте наше Сасс увозне документе за детаље.

  3. Затим учитавамо ЦСС и увозимо Боотстрап-ов ЈаваСцрипт. Додајте следеће да src/js/main.jsбисте учитали ЦСС и увезли све Боотстрап-ове ЈС. Поппер ће бити аутоматски увезен преко Боотстрапа.

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

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

    Такође можете да увезете ЈаваСцрипт додатке појединачно по потреби да бисте смањили величине пакета:

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

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

    Прочитајте наше ЈаваСцрипт документе за више информација о томе како да користите Боотстрап додатке.

  4. И готови сте! 🎉 Када су изворни Сасс и ЈС Боотстрап потпуно учитани, ваш локални развојни сервер би сада требао изгледати овако.

    Вебпацк дев сервер ради са Боотстрапом

    Сада можете да почнете да додајете све Боотстрап компоненте које желите да користите. Обавезно погледајте комплетан Вебпацк пројекат за пример како да укључите додатни прилагођени Сасс и оптимизујете своју верзију увозом само делова Боотстрап-овог ЦСС-а и ЈС-а који су вам потребни.

Оптимизације производње

У зависности од вашег подешавања, можда ћете желети да примените неке додатне оптимизације безбедности и брзине корисне за покретање пројекта у производњи. Имајте на уму да се ове оптимизације не примењују на Вебпацк пројекту и да је на вама да примените.

Екстракција ЦСС-а

Горе style-loaderсмо конфигурисали згодно емитује ЦСС у пакет тако да ручно учитавање ЦСС датотеке dist/index.htmlније неопходно. Међутим, овај приступ можда неће функционисати са строгом политиком безбедности садржаја и може постати уско грло у вашој апликацији због велике величине пакета.

Да бисте одвојили ЦСС тако да га можемо учитати директно из dist/index.html, користите mini-css-extract-loaderдодатак Вебпацк.

Прво инсталирајте додатак:

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

Затим инстанцирајте и користите додатак у конфигурацији Вебпацк-а:

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

Након поновног покретања npm run build, појавиће се нова датотека dist/main.cssкоја ће садржати сав ЦСС увезен од стране src/js/main.js. Ако сада погледате dist/index.htmlу свом претраживачу, стил ће недостајати, као што је сада у dist/main.css. Можете укључити генерисани ЦСС на dist/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>

Екстраховање СВГ датотека

Боотстрап-ов ЦСС укључује вишеструке референце на СВГ датотеке преко уграђених data:УРИ-ја. Ако дефинишете Политику безбедности садржаја за свој пројекат која блокира data:УРИ-је за слике, ове СВГ датотеке се неће учитати. Можете да заобиђете овај проблем тако што ћете издвојити уграђене СВГ датотеке користећи Вебпацк-ову функцију модула средстава.

Конфигуришите Вебпацк да издвоји инлине СВГ датотеке на следећи начин:

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

Након поновног покретања npm run build, наћи ћете СВГ датотеке екстраховане у dist/iconsЦСС и исправно референциране из ЦСС-а.

Видите овде нешто погрешно или застарело? Отворите проблем на ГитХуб-у . Потребна вам је помоћ у решавању проблема? Претражите или започните дискусију на ГитХуб-у.