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

Bootstrap & Webpack

Официјален водич за тоа како да ги вклучите и пакетите CSS и JavaScript на Bootstrap во вашиот проект користејќи Webpack.

На оваа страница
Сакате да прескокнете до крај? Преземете го изворниот код и работната демо за овој водич од складиштето twbs/examps . Можете исто така да го отворите примерот во StackBlitz за уредување во живо.

Поставување

Градиме проект Webpack со Bootstrap од нула, така што има некои предуслови и чекори пред навистина да започнеме. Овој водич бара од вас да имате инсталирано 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. Ќе го инсталираме и Popper бидејќи нашите спуштања, поповери и совети за алатки зависат од него за нивното позиционирање. Ако не планирате да ги користите тие компоненти, можете да го испуштите Popper овде.

    npm i --save bootstrap @popperjs/core

  4. Инсталирајте дополнителни зависности. Покрај Webpack и Bootstrap, потребни ни се уште неколку зависности за правилно увезување и комплетирање на CSS и JS на Bootstrap со 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. Ова е HTML-страницата Webpack што ќе ја вчита во прелистувачот за да ги користи комплетните CSS и JS што ќе ги додадеме во подоцнежните чекори. Пред да го направиме тоа, треба да му дадеме нешто за рендерирање и да го вклучиме outputJS од претходниот чекор.

    <!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>за да видиме кога CSS на Bootstrap ќе се вчита од Webpack.

  3. Сега ни треба скрипта npm за да го извршиме Webpack. Отворете 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 и ќе ги увеземе сите CSS и JavaScript на Bootstrap.

Увезете Bootstrap

За увоз на Bootstrap во Webpack се потребни натоварувачи што ги инсталиравме во првиот дел. Ги инсталиравме со 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'
          }
        ]
      }
    ]
  }
}

    Еве преглед зошто ни се потребни сите овие натоварувачи. style-loaderго инјектира CSS во <style>елемент во <head>HTML-страницата, css-loaderпомага при користењето @importи url(), postcss-loaderе потребен за Autoprefixer и sass-loaderни овозможува да користиме Sass.

  2. Сега, ајде да го увеземе CSS на Bootstrap. Додајте го следново за src/scss/styles.scssда го увезете целиот извор Sass на Bootstrap.

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

    Ако сакате, можете и поединечно да ги увезете нашите листови со стилови. Прочитајте ги нашите документи за увоз на Sass за детали.

  3. Следно, го вчитуваме CSS и увезуваме JavaScript на Bootstrap. Додајте го следново за src/js/main.jsда го вчитате CSS и да ги увезете сите JS на Bootstrap. Popper ќе се увезе автоматски преку 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'

    Прочитајте ги нашите JavaScript документи за повеќе информации за тоа како да ги користите приклучоците на Bootstrap.

  4. И завршивте! 🎉 Со целосно вчитани Sass и JS изворот на Bootstrap, вашиот локален сервер за развој сега треба да изгледа вака.

    Webpack dev сервер кој работи со Bootstrap

    Сега можете да започнете со додавање на сите компоненти на Bootstrap што сакате да ги користите. Задолжително проверете го целосниот проект за пример на Webpack за тоа како да вклучите дополнителен приспособен Sass и да ја оптимизирате вашата градба со увоз на само делови од CSS и JS на Bootstrap што ви се потребни.

Оптимизации на производство

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

Извлекување на CSS

Ние style-loaderго конфигуриравме погоре погодно емитува CSS во пакетот, така што рачно вчитување на датотека CSS dist/index.htmlне е потребно. Сепак, овој пристап може да не работи со строга Политика за безбедност на содржината и може да стане тесно грло во вашата апликација поради големата големина на пакетот.

За да го одделиме CSS за да можеме да го вчитаме директно од dist/index.html, користете го mini-css-extract-loaderприклучокот Webpack.

Прво, инсталирајте го приклучокот:

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

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

Извлекување SVG датотеки

CSS на Bootstrap вклучува повеќекратни референци за SVG-датотеки преку вградени data:URI. Ако дефинирате Политика за безбедност на содржината за вашиот проект што блокира data:URI-и за слики, тогаш овие SVG-датотеки нема да се вчитаат. Можете да го надминете овој проблем со извлекување на вградените SVG-датотеки со помош на функцијата за модули за средства на Webpack.

Конфигурирајте го Webpack за извлекување на вградени SVG датотеки како ова:

--- 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повторно, ќе ги најдете SVG-датотеките извлечени dist/iconsи соодветно референцирани од CSS.

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