Przejdź do głównej zawartości Przejdź do nawigacji w dokumentach
Check
in English

Bootstrap i pakiet internetowy

Oficjalny przewodnik dotyczący dołączania i łączenia CSS i JavaScript Bootstrap w projekcie za pomocą Webpack.

Na tej stronie
Chcesz przejść do końca? Pobierz kod źródłowy i działające demo tego przewodnika z repozytorium twbs/examples . Możesz także otworzyć przykład w StackBlitz do edycji na żywo.

Organizować coś

Budujemy projekt Webpack za pomocą Bootstrap od podstaw, więc zanim naprawdę zaczniemy, musimy spełnić pewne wymagania wstępne. Ten przewodnik wymaga zainstalowania Node.js i pewnej znajomości terminala.

  1. Utwórz folder projektu i ustaw npm. Utworzymy my-projectfolder i zainicjujemy npm z -yargumentem, aby uniknąć zadawania nam wszystkich interaktywnych pytań.

    mkdir my-project && cd my-project
npm init -y

  2. Zainstaluj pakiet internetowy. Następnie musimy zainstalować nasze zależności programistyczne Webpack: webpackdla rdzenia Webpack, webpack-cliabyśmy mogli uruchamiać polecenia Webpack z terminala, webpack-dev-serverabyśmy mogli uruchomić lokalny serwer programistyczny. Używamy --save-dev, aby zasygnalizować, że te zależności są przeznaczone tylko do użytku programistycznego, a nie produkcyjnego.

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

  3. Zainstaluj Bootstrap. Teraz możemy zainstalować Bootstrap. Zainstalujemy również Poppera, ponieważ nasze listy rozwijane, popovery i podpowiedzi zależą od tego w celu ich pozycjonowania. Jeśli nie planujesz używać tych komponentów, możesz pominąć tutaj Poppera.

    npm i --save bootstrap @popperjs/core

  4. Zainstaluj dodatkowe zależności. Oprócz Webpacka i Bootstrapa potrzebujemy jeszcze kilku zależności, aby poprawnie zaimportować i powiązać CSS i JS Bootstrapa z Webpackiem. Należą do nich Sass, niektóre loadery i Autoprefixer.

    npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader

Teraz, gdy mamy zainstalowane wszystkie niezbędne zależności, możemy zabrać się do pracy nad tworzeniem plików projektu i importowaniem Bootstrapa.

Struktura projektu

Stworzyliśmy już my-projectfolder i zainicjalizowaliśmy npm. Teraz utworzymy również nasze foldery srci dist, aby dopełnić strukturę projektu. Uruchom następujące polecenie my-projectlub ręcznie utwórz folder i strukturę plików pokazaną poniżej.

mkdir {dist,src,src/js,src/scss}
touch dist/index.html src/js/main.js src/scss/styles.scss webpack.config.js

Kiedy skończysz, Twój kompletny projekt powinien wyglądać tak:

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

W tym momencie wszystko jest na swoim miejscu, ale Webpack nie zadziała, ponieważ nie wypełniliśmy webpack.config.jsjeszcze naszego.

Skonfiguruj pakiet internetowy

Mając zainstalowane zależności i nasz folder projektu gotowy do rozpoczęcia kodowania, możemy teraz skonfigurować Webpack i uruchomić nasz projekt lokalnie.

  1. Otwórz webpack.config.jsw swoim edytorze. Ponieważ jest pusta, będziemy musieli dodać do niego trochę konfiguracji standardowej, abyśmy mogli uruchomić nasz serwer. Ta część konfiguracji mówi, że Webpack miał szukać JavaScript naszego projektu, gdzie wyprowadzić skompilowany kod do ( dist) i jak powinien zachowywać się serwer deweloperski (wyciągając z distfolderu z gorącym przeładowaniem).

    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. Następnie wypełniamy nasze dist/index.html. To jest strona HTML, która Webpack zostanie załadowana w przeglądarce, aby wykorzystać dołączone CSS i JS, które dodamy do niej w późniejszych krokach. Zanim to zrobimy, musimy dać mu coś do renderowania i dołączyć outputJS z poprzedniego kroku.

    <!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>

    Dołączamy tutaj trochę stylu Bootstrap z div class="container"i <button>tak, abyśmy mogli zobaczyć, kiedy CSS Bootstrap jest ładowany przez Webpack.

  3. Teraz potrzebujemy skryptu npm do uruchomienia Webpacka. Otwórz package.jsoni dodaj poniższy startskrypt (powinieneś już mieć skrypt testowy). Użyjemy tego skryptu, aby uruchomić nasz lokalny serwer deweloperski Webpack.

    {
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}

  4. I wreszcie możemy uruchomić Webpack. Z my-projectfolderu w terminalu uruchom nowo dodany skrypt npm:

    npm start
    Serwer Webpack działa

W następnej i ostatniej sekcji tego przewodnika skonfigurujemy programy ładujące pakiety Webpack i zaimportujemy cały CSS i JavaScript Bootstrap.

Importuj Bootstrap

Importowanie Bootstrapa do Webpacka wymaga programów ładujących, które zainstalowaliśmy w pierwszej sekcji. Zainstalowaliśmy je za pomocą npm, ale teraz trzeba skonfigurować Webpack, aby z nich korzystać.

  1. Ustaw ładowarki w webpack.config.js. Twój plik konfiguracyjny jest teraz gotowy i powinien pasować do poniższego fragmentu. Jedyną nową częścią tutaj jest modulesekcja.

    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'
          }
        ]
      }
    ]
  }
}

    Oto podsumowanie, dlaczego potrzebujemy tych wszystkich ładowarek. style-loaderwstrzykuje CSS do <style>elementu na <head>stronie HTML, css-loaderpomaga w używaniu @importi url(), postcss-loaderjest wymagany dla Autoprefixera i sass-loaderpozwala nam używać Sassa.

  2. Teraz zaimportujmy CSS Bootstrapa. Dodaj poniższe do, src/scss/styles.scssaby zaimportować wszystkie źródła Sass Bootstrapa.

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

    Możesz również importować nasze arkusze stylów indywidualnie, jeśli chcesz. Przeczytaj nasze dokumenty dotyczące importu Sass , aby uzyskać szczegółowe informacje.

  3. Następnie ładujemy CSS i importujemy JavaScript z Bootstrapa. Dodaj następujące elementy, src/js/main.jsaby załadować CSS i zaimportować wszystkie pliki JS Bootstrap. Popper zostanie zaimportowany automatycznie przez Bootstrap.

    // Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'

    W razie potrzeby możesz również importować wtyczki JavaScript pojedynczo, aby zmniejszyć rozmiary pakietów:

    import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'

    Przeczytaj naszą dokumentację JavaScript , aby uzyskać więcej informacji na temat korzystania z wtyczek Bootstrap.

  4. I jesteś skończony! 🎉 Po pełnym załadowaniu źródeł Sass i JS Bootstrapa, lokalny serwer programistyczny powinien teraz wyglądać tak.

    Serwer Webpack działający z Bootstrapem

    Teraz możesz zacząć dodawać dowolne komponenty Bootstrap, których chcesz użyć. Koniecznie sprawdź kompletny przykładowy projekt Webpack, aby dowiedzieć się, jak dodać dodatkowy niestandardowy Sass i zoptymalizować swoją kompilację, importując tylko te części CSS i JS Bootstrap, których potrzebujesz.

Optymalizacje produkcji

W zależności od konfiguracji możesz chcieć zaimplementować dodatkowe optymalizacje bezpieczeństwa i szybkości przydatne do uruchamiania projektu w środowisku produkcyjnym. Należy pamiętać, że te optymalizacje nie są stosowane w przykładowym projekcie Webpack i należy do Ciebie.

Wyodrębnianie CSS

Skonfigurowane powyżej wygodnie emituje CSS do style-loaderpakietu, dzięki czemu ręczne ładowanie pliku CSS dist/index.htmlnie jest konieczne. Takie podejście może jednak nie działać w przypadku ścisłej polityki bezpieczeństwa treści i może stać się wąskim gardłem w aplikacji ze względu na duży rozmiar pakietu.

Aby oddzielić CSS tak, abyśmy mogli go załadować bezpośrednio z dist/index.html, użyj mini-css-extract-loaderwtyczki Webpack.

Najpierw zainstaluj wtyczkę:

npm install --save-dev mini-css-extract-plugin

Następnie utwórz instancję i użyj wtyczki w konfiguracji Webpacka:

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

Po npm run buildponownym uruchomieniu pojawi się nowy plik dist/main.css, który będzie zawierał cały CSS zaimportowany przez src/js/main.js. Jeśli dist/index.htmlprzeglądasz teraz w przeglądarce, brakuje stylu, tak jak jest teraz w dist/main.css. Możesz dołączyć wygenerowany CSS w dist/index.htmlnastępujący sposób:

--- 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>

Wyodrębnianie plików SVG

CSS Bootstrap zawiera wiele odniesień do plików SVG za pośrednictwem wbudowanych data:identyfikatorów URI. Jeśli zdefiniujesz politykę bezpieczeństwa treści dla swojego projektu, która blokuje data:identyfikatory URI dla obrazów, te pliki SVG nie zostaną załadowane. Możesz obejść ten problem, wyodrębniając wbudowane pliki SVG za pomocą funkcji modułów zasobów Webpacka.

Skonfiguruj pakiet Webpack, aby wyodrębnić wbudowane pliki SVG, takie jak:

--- 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: [

Po npm run buildponownym uruchomieniu znajdziesz pliki SVG wyodrębnione do dist/iconsCSS i odpowiednie odniesienia z nich.

Widzisz tutaj coś złego lub nieaktualnego? Otwórz zgłoszenie w serwisie GitHub . Potrzebujesz pomocy w rozwiązywaniu problemów? Wyszukaj lub rozpocznij dyskusję na GitHub.