Перейти до основного вмісту Перейти до навігації документами
Check
in English

Bootstrap & Webpack

Офіційний посібник про те, як включити та об’єднати CSS і JavaScript Bootstrap у свій проект за допомогою Webpack.

На цій сторінці
Хочете перейти до кінця? Завантажте вихідний код і робочу демонстрацію для цього посібника зі сховища twbs/examples . Ви також можете відкрити приклад у 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"and <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щоб імпортувати весь вихідний код Bootstrap Sass.

    // 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. І готово! 🎉 Після повного завантаження вихідних кодів Bootstrap Sass і JS ваш локальний сервер розробки тепер має виглядати так.

    Сервер розробників Webpack працює з 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/iconsCSS і відповідні посилання на них.

Бачите тут щось не так або застаріло? Відкрийте випуск на GitHub . Потрібна допомога у вирішенні проблем? Шукайте або починайте обговорення на GitHub.