Gean nei haadynhâld Gean nei dokumintnavigaasje
Check
in English

Bootstrap & Webpack

De offisjele hantlieding foar hoe't jo Bootstrap's CSS en JavaScript kinne opnimme en bondele yn jo projekt mei Webpack.

Op dizze side
Wolle jo nei it ein oerslaan? Download de boarnekoade en wurkdemo foar dizze hantlieding fan it twbs/foarbylden repository . Jo kinne it foarbyld ek iepenje yn StackBlitz foar live bewurking.

Opsette

Wy bouwe in Webpack-projekt mei Bootstrap fanôf it begjin, dus d'r binne wat betingsten en stappen foarôf foardat wy echt kinne begjinne. Dizze gids fereasket dat jo Node.js ynstalleare hawwe en wat bekendheid mei de terminal.

  1. Meitsje in projektmap en set npm yn. Wy sille de my-projectmap oanmeitsje en npm inisjalisearje mei it -yargumint om foar te kommen dat it ús alle ynteraktive fragen stelt.

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

  2. Ynstallearje Webpack. Folgjende moatte wy ús Webpack-ûntwikkelingsôfhinklikens ynstallearje: webpackfoar de kearn fan Webpack, webpack-clisadat wy Webpack-kommando's kinne útfiere fan 'e terminal, en webpack-dev-serversa kinne wy ​​in lokale ûntwikkelingstsjinner útfiere. Wy brûke --save-devom te sinjalearjen dat dizze ôfhinklikens allinich binne foar ûntwikkelingsgebrûk en net foar produksje.

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

  3. Ynstallearje Bootstrap. No kinne wy ​​​​Bootstrap ynstallearje. Wy sille Popper ek ynstallearje, om't ús dropdowns, popovers en tooltips derfan ôfhingje foar har posysje. As jo ​​​​net fan plan binne dizze komponinten te brûken, kinne jo Popper hjir weglitte.

    npm i --save bootstrap @popperjs/core

  4. Ynstallearje ekstra ôfhinklikens. Neist Webpack en Bootstrap hawwe wy in pear mear ôfhinklikens nedich om de CSS en JS fan Bootstrap goed te ymportearjen en te bondeljen mei Webpack. Dizze omfetsje Sass, guon loaders, en Autoprefixer.

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

No't wy alle nedige ôfhinklikens ynstalleare hawwe, kinne wy ​​​​oan it wurk gean om de projektbestannen te meitsjen en Bootstrap te ymportearjen.

Projektstruktuer

Wy hawwe de my-projectmap al oanmakke en npm inisjalisearre. No sille wy ek ús srcen distmappen oanmeitsje om de projektstruktuer ôf te ronden. Rinne de folgjende út my-project, of meitsje de map- en bestânstruktuer manuell oan dy't hjirûnder werjûn wurdt.

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

As jo ​​​​klear binne, moat jo folsleine projekt der sa útsjen:

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

Op dit punt is alles op it goede plak, mar Webpack sil net wurkje, om't wy ús noch net ynfolle webpack.config.jshawwe.

Webpack ynstelle

Mei ôfhinklikens ynstalleare en ús projektmap klear foar ús om te begjinnen mei kodearring, kinne wy ​​no Webpack konfigurearje en ús projekt lokaal útfiere.

  1. Iepenje webpack.config.jsyn jo bewurker. Om't it leech is, moatte wy wat boilerplate-konfiguraasje tafoegje, sadat wy ús tsjinner kinne starte. Dit diel fan 'e konfiguraasje fertelt dat Webpack soe sykje nei JavaScript fan ús projekt, wêr't de kompilearre koade nei ( dist), en hoe't de ûntwikkelingstsjinner moat gedrage (út de distmap lûke mei hyt opnij laden).

    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. Folgjende folje wy ús dist/index.html. Dit is de HTML-side dy't Webpack sil laden yn 'e browser om de bondele CSS en JS te brûken dy't wy der yn lettere stappen oan tafoegje. Foardat wy dat kinne dwaan, moatte wy it wat jaan om te werjaan en de outputJS fan 'e foarige stap op te nimmen.

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

    Wy befetsje hjir in bytsje Bootstrap-styling mei de div class="container"en <button>sadat wy sjogge wannear't Bootstrap's CSS wurdt laden troch Webpack.

  3. No hawwe wy in npm-skript nedich om Webpack út te fieren. Iepenje package.jsonen foegje it starthjirûnder werjûn skript ta (jo moatte it testskript al hawwe). Wy sille dit skript brûke om ús lokale Webpack dev-tsjinner te starten.

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

  4. En as lêste kinne wy ​​Webpack begjinne. Ut de my-projectmap yn jo terminal, rinne dat nij tafoege npm-skript:

    npm start
    Webpack dev-tsjinner rint

Yn 'e folgjende en lêste seksje fan dizze hantlieding sille wy de Webpack-laders ynstelle en alle CSS en JavaScript fan Bootstrap ymportearje.

Ymportearje Bootstrap

It ymportearjen fan Bootstrap yn Webpack fereasket de loaders dy't wy yn 'e earste seksje ynstalleare. Wy hawwe se ynstalleare mei npm, mar no moat Webpack konfigureare wurde om se te brûken.

  1. Stel de loaders yn webpack.config.js. Jo konfiguraasjetriem is no kompleet en moat oerienkomme mei it snippet hjirûnder. It ienige nije diel hjir is de moduleseksje.

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

    Hjir is in gearfetting fan wêrom't wy al dizze loaders nedich binne. style-loaderinjects de CSS yn in <style>elemint yn 'e <head>fan' e HTML side, css-loaderhelpt mei it brûken @importen url(), postcss-loaderis nedich foar Autoprefixer, en sass-loaderlit ús brûke Sass.

  2. Litte wy no de CSS fan Bootstrap ymportearje. Foegje it folgjende ta src/scss/styles.scssoan om alle boarne Sass fan Bootstrap te ymportearjen.

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

    Jo kinne ús stylblêden ek yndividueel ymportearje as jo wolle. Lês ús Sass ymportdokuminten foar details.

  3. Folgjende laden wy de CSS en ymportearje Bootstrap's JavaScript. Foegje it folgjende ta src/js/main.jsom de CSS te laden en alle Bootstrap's JS te ymportearjen. Popper sil automatysk wurde ymportearre fia Bootstrap.

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

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

    Jo kinne JavaScript-plugins ek yndividueel ymportearje as nedich om bondelgrutte te hâlden:

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

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

    Lês ús JavaScript-dokuminten foar mear ynformaasje oer hoe't jo de plugins fan Bootstrap kinne brûke.

  4. En do bist klear! 🎉 Mei Bootstrap's boarne Sass en JS folslein laden, soe jo lokale ûntwikkelingsserver no der sa útsjen moatte.

    Webpack dev-tsjinner dy't rint mei Bootstrap

    No kinne jo begjinne mei it tafoegjen fan alle Bootstrap-komponinten dy't jo wolle brûke. Wês wis dat jo it folsleine Webpack-foarbyldprojekt kontrolearje foar hoe't jo ekstra oanpaste Sass opnimme en jo build optimalisearje troch allinich de dielen fan Bootstrap's CSS en JS te ymportearjen dy't jo nedich binne.

Produksje optimizations

Ofhinklik fan jo opset, wolle jo miskien wat ekstra feiligens- en snelheidsoptimalisaasjes ymplementearje dy't nuttich binne foar it útfieren fan it projekt yn produksje. Tink derom dat dizze optimalisaasjes net wurde tapast op it Webpack-foarbyldprojekt en binne oan jo om te ymplementearjen.

CSS útpakke

De style-loaderhjirboppe konfigureare stjoert CSS maklik út yn 'e bondel, sadat it manuell laden fan in CSS-bestân dist/index.htmlnet nedich is. Dizze oanpak kin lykwols net wurkje mei in strikt ynhâldsbefeiligingsbelied, en it kin in knelpunt wurde yn jo applikaasje fanwegen de grutte bondelgrutte.

Om de CSS te skieden sadat wy it direkt kinne laden fan dist/index.html, brûk de mini-css-extract-loaderWebpack-plugin.

Ynstallearje earst de plugin:

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

Instantiearje en brûk dan de plugin yn 'e Webpack-konfiguraasje:

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

Nei it wer rinnen npm run buildsil d'r in nij bestân wêze dist/main.css, dat alle CSS ymporteare sil befetsje troch src/js/main.js. As jo dist/index.html​​no yn jo blêder besjen, sil de styl ûntbrekke, lykas it no is yn dist/main.css. Jo kinne de generearre CSS opnimme yn dist/index.htmlsa:

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

De CSS fan Bootstrap omfettet meardere ferwizings nei SVG-bestannen fia ynline data:URI's. As jo ​​in ynhâldsfeiligensbelied definiearje foar jo projekt dat data:URI's foar ôfbyldings blokkearret, dan sille dizze SVG-bestannen net laden wurde. Jo kinne dit probleem omgean troch de ynline SVG-bestannen te ekstrahearjen mei de funksje fan aktivamodules fan Webpack.

Webpack konfigurearje om ynline SVG-bestannen te ekstrahearjen lykas dit:

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

Nei't npm run buildjo wer rinne, fine jo de SVG-bestannen ekstrahearre yn dist/iconsen goed ferwiisd fan CSS.

Sjoch hjir wat ferkeard of ferâldere? Iepenje asjebleaft in probleem op GitHub . Help nedich by it oplossen fan problemen? Sykje of begjin in diskusje op GitHub.