Перайсці да асноўнага зместу Перайсці да навігацыі па дакументах
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"і <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 Dev працуе

У наступным і апошнім раздзеле гэтага кіраўніцтва мы наладзім загрузчыкі 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 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/iconsCSS і адпаведныя спасылкі з іх.

Бачыце тут штосьці не так ці састарэлае? Адкрыйце пытанне на GitHub . Патрэбна дапамога па ліквідацыі непаладак? Шукайце або пачынайце абмеркаванне на GitHub.