Bootstrap и Webpack

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

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 чтобы мы могли запускать локальный сервер разработки. Кроме того, мы установим html-webpack-plugin, чтобы иметь возможность хранить наш index.html в src каталоге вместо каталога по умолчанию dist. Мы используем --save-dev для обозначения того, что эти зависимости предназначены только для разработки, а не для производства.

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

  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 {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss webpack.config.js

Когда вы закончите, весь ваш проект должен выглядеть следующим образом:

my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   ├── scss/
│   │   └── styles.scss
│   └── index.html
├── package-lock.json
├── package.json
└── webpack.config.js

На данный момент все находится в нужном месте, но Webpack не будет работать, потому что мы еще не заполнили наш webpack.config.js.

Настройка Webpack

Теперь, когда зависимости установлены и папка нашего проекта готова для начала программирования, мы можем настроить Webpack и запустить наш проект локально.

  1. Откройте webpack.config.js в вашем редакторе. Поскольку он пустой, нам нужно добавить в него некоторую шаблонную конфигурацию, чтобы мы могли запустить наш сервер. Эта часть конфигурации сообщает Webpack, где искать JavaScript нашего проекта, куда выводить скомпилированный код (dist) и как должен вести себя сервер разработки (извлекая из dist папки с горячей перезагрузкой).

    'use strict'

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: './src/js/main.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 8080,
    hot: true
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' })
  ]
}

  2. Далее мы заполняем нашуsrc/index.html. Это HTML-страница, которую Webpack загрузит в браузер для использования встроенных CSS и JS, которые мы добавим к нему на последующих этапах. Прежде чем мы сможем это сделать, мы должны предоставить ему что-то для рендеринга и включить 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>
  </body>
</html>

    Мы включили сюда немного стиля Bootstrap с помощью div class="container" и <button>, чтобы видеть, когда CSS Bootstrap загружается Webpack.

  3. Теперь нам нужен npm-скрипт для запуска Webpack. Откройте package.json и добавьте start скрипт, показанный ниже (тестовый скрипт у вас уже должен быть). Мы будем использовать этот скрипт для запуска нашего локального сервера разработки Webpack. Вы также можете добавить build приведенный ниже скрипт для сборки вашего проекта.

    {
  // ...
  "scripts": {
    "start": "webpack serve",
    "build": "webpack build --mode=production",
    "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 раздел.

    'use strict'

const path = require('path')
const autoprefixer = require('autoprefixer')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: './src/js/main.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 8080,
    hot: true
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' })
  ],
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [
          {
            // Adds CSS to the DOM by injecting a `<style>` tag
            loader: 'style-loader'
          },
          {
            // Interprets `@import` and `url()` like `import/require()` and will resolve them
            loader: 'css-loader'
          },
          {
            // Loader for webpack to process CSS with PostCSS
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  autoprefixer
                ]
              }
            }
          },
          {
            // Loads a SASS/SCSS file and compiles it to CSS
            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 и импортируем Bootstrap JavaScript. Добавьте следующее в 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 и оптимизировать сборку, импортируя только те части Bootstrap CSS и JS, которые вам нужны.

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

В зависимости от ваших настроек вы можете захотеть реализовать некоторые дополнительные оптимизации безопасности и скорости, полезные для запуска проекта в производство. Обратите внимание, что эти оптимизации не применяются в проекте примера 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.config.js
+++ b/webpack.config.js
@@ -3,6 +3,7 @@
 const path = require('path')
 const autoprefixer = require('autoprefixer')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
+const miniCssExtractPlugin = require('mini-css-extract-plugin')

 module.exports = {
   mode: 'development',
@@ -17,7 +18,8 @@ module.exports = {
     hot: true
   },
   plugins: [
-    new HtmlWebpackPlugin({ template: './src/index.html' })
+    new HtmlWebpackPlugin({ template: './src/index.html' }),
+    new miniCssExtractPlugin()
   ],
   module: {
     rules: [
@@ -25,8 +27,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/dist/index.html
+++ b/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-файлы с помощью функции asset modules в Webpack.

Настройте Webpack для извлечения встроенных SVG-файлов следующим образом:

--- a/webpack.config.js
+++ b/webpack.config.js
@@ -23,6 +23,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.

На этой странице

  1. Настройка
  2. Структура проекта
  3. Настройка Webpack
  4. Импорт Bootstrap
  5. Оптимизация производства
    1. Извлечение CSS
    2. Извлечение SVG-файлов