Bootstrap & Webpack

Ametlik juhend Bootstrapi CSS-i ja JavaScripti kaasamiseks ja komplekteerimiseks oma projekti Webpacki abil.

Sellel lehel

Kas soovite lõpuni vahele jätta? Laadige twbs/examples hoidlast alla selle juhendi lähtekood ja töötav demo . Näite saate avada ka StackBlitzis reaalajas redigeerimiseks.

Seadistamine

Ehitame veebipaketi projekti koos Bootstrapiga nullist üles, seega on mõned eeltingimused ja sammud, enne kui saame päriselt alustada. See juhend nõuab, et teil oleks installitud Node.js ja tunneksite terminali teatud määral.

Looge projekti kaust ja seadistage npm. Loome my-projectkausta ja initsialiseerime npm -yargumendiga, et see ei esitaks meile kõiki interaktiivseid küsimusi.
```
mkdir my-project && cd my-project
npm init -y
```
Installige Webpack. Järgmisena peame installima oma Webpacki arendussõltuvused: webpackWebpacki tuuma jaoks, webpack-cliet saaksime terminalist Webpacki käske webpack-dev-serverkäivitada ja kohalikku arendusserverit käivitada. Me kasutame --save-devmärku andmiseks, et need sõltuvused on mõeldud ainult arendustegevuseks, mitte tootmiseks.
```
npm i --save-dev webpack webpack-cli webpack-dev-server
```
Installige Bootstrap. Nüüd saame installida Bootstrapi. Installime ka Popperi, kuna meie rippmenüüd, hüpikaknad ja tööriistaspikrid sõltuvad sellest oma asukoha määramisel. Kui te ei kavatse neid komponente kasutada, võite Popperi siit välja jätta.
```
npm i --save bootstrap @popperjs/core
```
Installige täiendavad sõltuvused. Lisaks Webpackile ja Bootstrapile vajame Bootstrapi CSS-i ja JS-i nõuetekohaseks importimiseks ja Webpackiga komplekteerimiseks veel mõnda sõltuvust. Nende hulka kuuluvad Sass, mõned laadurid ja Autoprefixer.
```
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
```

Nüüd, kui meil on kõik vajalikud sõltuvused installitud, saame alustada projektifailide loomise ja Bootstrapi importimisega.

Projekti struktuur

Oleme my-projectkausta juba loonud ja npm initsialiseerinud. Nüüd loome projekti struktuuri ümardamiseks ka meie srcja kaustad. distKäivitage alljärgnev my-projectvõi looge käsitsi allpool näidatud kausta- ja failistruktuur.

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

Kui olete lõpetanud, peaks teie kogu projekt välja nägema järgmine:

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

Praegu on kõik õiges kohas, kuid Webpack ei tööta, sest me pole webpack.config.jsveel oma täitnud.

Veebipaketi konfigureerimine

Kui sõltuvused on installitud ja meie projektikaust on kodeerimise alustamiseks valmis, saame nüüd Webpacki konfigureerida ja oma projekti kohapeal käivitada.

Ava webpack.config.jsoma redaktoris. Kuna see on tühi, peame serveri käivitamiseks lisama sellele mõne katla konfiguratsiooni. See konfiguratsiooniosa ütleb, et Webpack peab otsima meie projekti JavaScripti, kuhu kompileeritud kood ( dist) väljastada ja kuidas peaks arendusserver käituma ( distkuum taaslaadimisega kaustast tõmbamine).
```
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
  }
}
```

Järgmisena täidame oma dist/index.html. See on HTML-leht, mille Webpack laadib brauserisse, et kasutada komplekteeritud CSS-i ja JS-i, mille lisame sellele hilisemates etappides. Enne kui saame seda teha, peame andma sellele midagi renderdamiseks ja kaasama outputeelmise sammu JS-i.

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

Lisame siia veidi Bootstrapi stiili koos jaga div class="container", <button>et näeksime, millal Webpack laadib Bootstrapi CSS-i.

Nüüd vajame Webpacki käivitamiseks npm-skripti. Avage package.jsonja lisage startallpool näidatud skript (teil peaks testskript juba olemas olema). Kasutame seda skripti kohaliku Webpacki arendusserveri käivitamiseks.
```
{
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Ja lõpuks saame alustada Webpackiga. Käivitage oma terminali my-projectkaustas äsja lisatud npm-skript:
```
npm start
```

Selle juhendi järgmises ja viimases jaotises seadistame Webpacki laadijad ja impordime kogu Bootstrapi CSS-i ja JavaScripti.

Impordi Bootstrap

Bootstrapi importimiseks Webpacki on vaja laadureid, mille installisime esimeses jaotises. Oleme need installinud npm-iga, kuid nüüd tuleb Webpack nende kasutamiseks konfigureerida.

Seadistage laadurid sisse webpack.config.js. Teie konfiguratsioonifail on nüüd valmis ja peaks vastama allolevale väljavõttele. Ainus uus osa siin on modulejaotis.

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

Siin on kokkuvõte, miks me kõiki neid laadureid vajame. style-loadersisestab CSS-i HTML-lehe <style>elemendisse , aitab kasutada ja , on vajalik automaatse prefikseri jaoks ja võimaldab meil kasutada Sassi.<head>css-loader@importurl()postcss-loadersass-loader

Nüüd impordime Bootstrapi CSS-i. src/scss/styles.scssKogu Bootstrapi allika Sassi importimiseks lisage järgmine .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Soovi korral saate meie laaditabeleid ka eraldi importida. Lisateavet leiate meie Sassi impordi dokumentidest .
Järgmisena laadime CSS-i ja impordime Bootstrapi JavaScripti. Lisage src/js/main.jsCSS-i laadimiseks ja kogu Bootstrapi JS-i importimiseks järgmine. Popper imporditakse automaatselt Bootstrapi kaudu.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Vajadusel saate JavaScripti pistikprogramme ka ükshaaval importida, et kimpude suurust vähendada.
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Bootstrapi pistikprogrammide kasutamise kohta lisateabe saamiseks lugege meie JavaScripti dokumente .
Ja ongi valmis! 🎉 Kui Bootstrapi allikas Sass ja JS on täielikult laetud, peaks teie kohalik arendusserver nüüd välja nägema selline.

Nüüd saate hakata lisama mis tahes Bootstrapi komponente, mida soovite kasutada. Vaadake kindlasti täielikku Webpacki näidisprojekti , kuidas lisada täiendavat kohandatud Sassi ja optimeerida oma ehitust, importides ainult need Bootstrapi CSS-i ja JS-i osad, mida vajate.

Tootmise optimeerimine

Olenevalt seadistusest võite soovida rakendada mõningaid täiendavaid turvalisuse ja kiiruse optimeerimisi, mis on kasulikud projekti tootmises käitamiseks. Pange tähele, et neid optimeerimisi ei rakendata Webpacki näidisprojektis ja need on teie enda teha.

CSS-i ekstraktimine

Eespool style-loaderkonfigureeritud väljastab mugavalt CSS-i kimpu, nii et CSS-faili käsitsi laadimine dist/index.htmlpole vajalik. See lähenemisviis ei pruugi aga rangete sisuturbepoliitikaga töötada ja see võib saada teie rakenduse kitsaskohaks, kuna kogum on suur.

CSS-i eraldamiseks, et saaksime selle otse rakendusest laadida dist/index.html, kasutage mini-css-extract-loaderWebpacki pistikprogrammi.

Esmalt installige pistikprogramm:

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

Seejärel looge pistikprogramm ja kasutage seda veebipaketi konfiguratsioonis:

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

Pärast npm run builduuesti käivitamist ilmub uus fail dist/main.css, mis sisaldab kogu kasutaja imporditud CSS-i src/js/main.js. Kui vaatate dist/index.htmlpraegu oma brauseris, puudub stiil, nagu see praegu on dist/main.css. Loodud CSS-i saate lisada järgmiselt 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-failide ekstraktimine

Bootstrapi CSS sisaldab sisemiste data:URI-de kaudu mitmeid viiteid SVG-failidele. Kui määrate oma projekti jaoks sisuturbepoliitika, mis blokeerib data:piltide URI-d, siis neid SVG-faile ei laadita. Saate sellest probleemist mööda hiilida, ekstraheerides veebipõhised SVG-failid, kasutades Webpacki varamoodulite funktsiooni.

Seadistage Webpack nii, et see ekstraheeriks SVG-faile järgmiselt:

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

Pärast npm run builduuesti käivitamist leiate SVG-failid, mis on ekstraktitud dist/iconsCSS-i ja neile viidatakse õigesti.

Kas näete siin midagi valesti või aegunud? Avage probleem GitHubis . Kas vajate veaotsingul abi? Otsige või alustage arutelu GitHubis.