in English

Bootstrap & Webpack

Официалното ръководство за това как да включите и групирате CSS и JavaScript на Bootstrap във вашия проект с помощта на Webpack.

На тази страница

Искате ли да прескочите до края? Изтеглете изходния код и работната демонстрация за това ръководство от хранилището twbs/examples . Можете също да отворите примера в StackBlitz за редактиране на живо.

Настройвам

Изграждаме проект Webpack с Bootstrap от нулата, така че има някои предварителни условия и предварителни стъпки, преди наистина да можем да започнем. Това ръководство изисква да имате инсталиран Node.js и известни познания с терминала.

Създайте папка на проекта и настройте npm. Ще създадем my-projectпапката и ще инициализираме npm с -yаргумента, за да избегнем задаването на всички интерактивни въпроси.
```
mkdir my-project && cd my-project
npm init -y
```
Инсталирайте Webpack. След това трябва да инсталираме нашите зависимости за разработка на Webpack: webpackза ядрото на Webpack, webpack-cliза да можем да изпълняваме команди на Webpack от терминала и webpack-dev-serverза да можем да стартираме локален сървър за разработка. Използваме --save-dev, за да сигнализираме, че тези зависимости са само за разработка, а не за производство.
```
npm i --save-dev webpack webpack-cli webpack-dev-server
```
Инсталирайте Bootstrap. Сега можем да инсталираме Bootstrap. Ние също така ще инсталираме Popper, тъй като нашите падащи менюта, изскачащи менюта и подсказки зависят от него за тяхното позициониране. Ако не планирате да използвате тези компоненти, можете да пропуснете Popper тук.
```
npm i --save bootstrap @popperjs/core
```
Инсталирайте допълнителни зависимости. В допълнение към 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 и да стартираме нашия проект локално.

Отворете 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
  }
}
```
След това попълваме нашия 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.
Сега се нуждаем от npm скрипт, за да стартираме Webpack. Отворете package.jsonи добавете startскрипта, показан по-долу (вече трябва да имате тестовия скрипт). Ще използваме този скрипт, за да стартираме нашия локален сървър за разработка на Webpack.
```
{
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
И накрая, можем да стартираме Webpack. От my-projectпапката във вашия терминал изпълнете този новодобавен npm скрипт:
```
npm start
```

В следващия и последен раздел на това ръководство ще настроим зареждащите устройства на Webpack и ще импортираме всички CSS и JavaScript на Bootstrap.

Импортирайте Bootstrap

Импортирането на Bootstrap в Webpack изисква зареждащите програми, които инсталирахме в първия раздел. Ние ги инсталирахме с npm, но сега Webpack трябва да бъде конфигуриран, за да ги използва.

Настройте товарачите в 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.

Сега нека импортираме CSS на Bootstrap. Добавете следното към src/scss/styles.scss, за да импортирате целия изходен Sass на Bootstrap.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Можете също така да импортирате нашите таблици със стилове поотделно, ако желаете. Прочетете нашите документи за импортиране на Sass за подробности.
След това зареждаме 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.
И сте готови! 🎉 С напълно зареден Sass и JS източник на Bootstrap, вашият локален сървър за разработка вече трябва да изглежда така.

Сега можете да започнете да добавяте всички компоненти на Bootstrap, които искате да използвате. Не забравяйте да проверите пълния примерен проект на Webpack за това как да включите допълнителен персонализиран Sass и да оптимизирате компилацията си, като импортирате само частите от CSS и JS на Bootstrap, от които се нуждаете.

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

В зависимост от вашата настройка, може да искате да приложите някои допълнителни оптимизации на сигурността и скоростта, полезни за изпълнение на проекта в производство. Обърнете внимание, че тези оптимизации не се прилагат към примерния проект на Webpack и зависи от вас да ги внедрите.

Извличане на CSS

Конфигурираното от style-loaderнас по-горе удобно излъчва CSS в пакета, така че dist/index.htmlне е необходимо ръчно зареждане на CSS файл. Този подход обаче може да не работи със стриктна политика за сигурност на съдържанието и може да се превърне в пречка във вашето приложение поради големия размер на пакета.

За да отделим 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.