Slaan oor na hoofinhoud Slaan oor na dokumentnavigasie
Check
in English

Bootstrap & Webpack

Die amptelike gids vir hoe om Bootstrap se CSS en JavaScript in jou projek in te sluit en te bundel met Webpack.

Op hierdie bladsy
Wil jy oorslaan tot die einde? Laai die bronkode en werkende demo vir hierdie gids af vanaf die twbs/voorbeelde-bewaarplek . U kan ook die voorbeeld in StackBlitz oopmaak vir regstreekse redigering.

Stel op

Ons bou 'n Webpack-projek van nuuts af met Bootstrap, so daar is 'n paar voorvereistes en vooraf stappe voordat ons regtig kan begin. Hierdie gids vereis dat jy Node.js moet installeer en 'n mate van vertroudheid met die terminale moet hê.

  1. Skep 'n projekgids en stel npm op. Ons sal die my-projectlêergids skep en npm met die -yargument inisialiseer om te verhoed dat dit ons al die interaktiewe vrae vra.

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

  2. Installeer Webpack. Volgende moet ons ons Webpack-ontwikkelingsafhanklikhede installeer: webpackvir die kern van Webpack, webpack-clisodat ons Webpack-opdragte vanaf die terminaal kan uitvoer, en webpack-dev-serversodat ons 'n plaaslike ontwikkelingsbediener kan bestuur. Ons gebruik --save-devom aan te dui dat hierdie afhanklikhede slegs vir ontwikkelingsgebruik is en nie vir produksie nie.

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

  3. Installeer Bootstrap. Nou kan ons Bootstrap installeer. Ons sal ook Popper installeer aangesien ons aftreklys, popovers en nutswenke daarvan afhang vir hul posisionering. As jy nie van plan is om daardie komponente te gebruik nie, kan jy Popper hier weglaat.

    npm i --save bootstrap @popperjs/core

  4. Installeer bykomende afhanklikhede. Benewens Webpack en Bootstrap, het ons nog 'n paar afhanklikhede nodig om Bootstrap se CSS en JS behoorlik met Webpack in te voer en te bundel. Dit sluit Sass, sommige laaiers en Autoprefixer in.

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

Noudat ons al die nodige afhanklikhede geïnstalleer het, kan ons begin om die projeklêers te skep en Bootstrap in te voer.

Projekstruktuur

Ons het reeds die my-projectgids geskep en npm geïnitialiseer. Nou sal ons ook ons src​​en distdopgehou skep om die projekstruktuur af te rond. Begin die volgende vanaf my-project, of skep met die hand die gids- en lêerstruktuur wat hieronder getoon word.

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

Wanneer jy klaar is, behoort jou volledige projek soos volg te lyk:

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

Op hierdie stadium is alles op die regte plek, maar Webpack sal nie werk nie, want ons het ons nog nie ingevul webpack.config.jsnie.

Stel Webpack op

Met afhanklikhede geïnstalleer en ons projeklêer gereed vir ons om met kodering te begin, kan ons nou Webpack opstel en ons projek plaaslik laat loop.

  1. Maak oop webpack.config.jsin jou redigeerder. Aangesien dit leeg is, sal ons 'n paar boilerplate-konfigurasie daarby moet voeg sodat ons ons bediener kan begin. Hierdie deel van die konfigurasie sê vir Webpack moet soek vir ons projek se JavaScript, waarheen om die saamgestelde kode uit te voer ( dist), en hoe die ontwikkelingsbediener moet optree (trek uit die distgids met warm herlaai).

    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. Volgende vul ons ons dist/index.html. Dit is die HTML-bladsy wat Webpack in die blaaier sal laai om die saamgevoegde CSS en JS te gebruik wat ons in latere stappe daarby sal voeg. Voordat ons dit kan doen, moet ons dit iets gee om weer te gee en die outputJS van die vorige stap in te sluit.

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

    Ons sluit 'n bietjie Bootstrap-stilering hier in met die div class="container"en <button>sodat ons kan sien wanneer Bootstrap se CSS deur Webpack gelaai word.

  3. Nou het ons 'n npm-skrip nodig om Webpack te laat loop. Maak oop package.jsonen voeg die startskrif hieronder by (jy behoort reeds die toetsskrif te hê). Ons sal hierdie skrif gebruik om ons plaaslike Webpack-ontwikkelaarbediener te begin.

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

  4. En uiteindelik kan ons Webpack begin. Voer die nuut bygevoegde npm-skrip uit die my-projectgids in jou terminale uit:

    npm start
    Webpack-ontwikkelaarbediener loop

In die volgende en laaste afdeling van hierdie gids, sal ons die Webpack-laaiers opstel en al Bootstrap se CSS en JavaScript invoer.

Voer Bootstrap in

Die invoer van Bootstrap in Webpack vereis die laaiers wat ons in die eerste afdeling geïnstalleer het. Ons het hulle met npm geïnstalleer, maar nou moet Webpack gekonfigureer word om dit te gebruik.

  1. Stel die laaiers op in webpack.config.js. Jou konfigurasielêer is nou voltooi en behoort by die brokkie hieronder te pas. Die enigste nuwe deel hier is die moduleafdeling.

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

    Hier is 'n opsomming van hoekom ons al hierdie laaiers nodig het. style-loaderspuit die CSS in 'n <style>element in <head>die HTML-bladsy in, css-loaderhelp met die gebruik van @importen url(), postcss-loaderword vereis vir Autoprefixer, en sass-loaderlaat ons toe om Sass te gebruik.

  2. Kom ons voer nou Bootstrap se CSS in. Voeg die volgende by src/scss/styles.scssom al Bootstrap se bron Sass in te voer.

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

    Jy kan ook ons ​​stylblaaie individueel invoer as jy wil. Lees ons Sass-invoerdokumente vir besonderhede.

  3. Volgende laai ons die CSS en voer Bootstrap se JavaScript in. Voeg die volgende by src/js/main.jsom die CSS te laai en al Bootstrap se JS in te voer. Popper sal outomaties deur Bootstrap ingevoer word.

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

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

    Jy kan ook JavaScript-inproppe individueel invoer soos nodig om bondelgroottes laag te hou:

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

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

    Lees ons JavaScript-dokumente vir meer inligting oor hoe om Bootstrap se inproppe te gebruik.

  4. En jy is klaar! 🎉 Met Bootstrap se bron Sass en JS ten volle gelaai, behoort jou plaaslike ontwikkelingsbediener nou so te lyk.

    Webpack-ontwikkelaarbediener wat met Bootstrap loop

    Nou kan jy begin om enige Bootstrap-komponente by te voeg wat jy wil gebruik. Kyk gerus na die volledige Webpack-voorbeeldprojek vir hoe om bykomende pasgemaakte Sass in te sluit en jou bouwerk te optimaliseer deur slegs die dele van Bootstrap se CSS en JS in te voer wat jy nodig het.

Produksie-optimalisasies

Afhangende van jou opstelling, wil jy dalk 'n paar bykomende sekuriteit- en spoedoptimalisasies implementeer wat nuttig is om die projek in produksie te laat loop. Let daarop dat hierdie optimaliserings nie op die Webpack-voorbeeldprojek toegepas word nie en aan jou is om te implementeer.

Onttrek CSS

Die style-loaderwat ons hierbo gekonfigureer het, stuur gerieflik CSS in die bondel uit, sodat dit dist/index.htmlnie nodig is om 'n CSS-lêer handmatig in te laai nie. Hierdie benadering werk dalk nie met 'n streng inhoudsekuriteitsbeleid nie, en dit kan 'n bottelnek in u toepassing word as gevolg van die groot bondelgrootte.

Om die CSS te skei sodat ons dit direk vanaf kan laai dist/index.html, gebruik die mini-css-extract-loaderWebpack-inprop.

Installeer eers die inprop:

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

Instansieer en gebruik dan die inprop in die Webpack-konfigurasie:

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

Nadat u weer gehardloop npm run buildhet, sal daar 'n nuwe lêer wees dist/main.css, wat al die CSS sal bevat wat deur src/js/main.js. As jy dist/index.htmlnou in jou blaaier kyk, sal die styl ontbreek, aangesien dit nou in is dist/main.css. U kan die gegenereerde CSS dist/index.htmlso insluit:

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

Onttrek SVG-lêers

Bootstrap se CSS bevat veelvuldige verwysings na SVG-lêers via inlyn- data:URI's. As jy 'n inhoudsekuriteitsbeleid vir jou projek definieer wat data:URI's vir beelde blokkeer, sal hierdie SVG-lêers nie laai nie. U kan hierdie probleem omseil deur die inlyn SVG-lêers te onttrek deur Webpack se batemodules-funksie te gebruik.

Stel Webpack op om inline SVG-lêers soos volg te onttrek:

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

Nadat u weer gehardloop npm run buildhet, sal u die SVG-lêers vind wat in CSS onttrek is dist/iconsen behoorlik verwys word vanaf CSS.

Sien iets verkeerd of verouderd hier? Maak asseblief 'n probleem oop op GitHub . Het u hulp nodig met die oplos van probleme? Soek of begin 'n bespreking op GitHub.