Fara í aðalefni Farðu í skjalaleiðsögn
Check
in English

Bootstrap & Webpack

Opinber leiðarvísir um hvernig á að innihalda og sameina Bootstrap CSS og JavaScript í verkefnið þitt með því að nota Webpack.

Á þessari síðu
Viltu sleppa til enda? Sæktu frumkóðann og sýnishornið fyrir þessa handbók frá twbs/examples geymslunni . Þú getur líka opnað dæmið í StackBlitz fyrir lifandi klippingu.

Uppsetning

Við erum að byggja upp Webpack verkefni með Bootstrap frá grunni, svo það eru nokkrar forsendur og fyrstu skref áður en við getum byrjað fyrir alvöru. Þessi handbók krefst þess að þú hafir Node.js uppsett og þekkir flugstöðina.

  1. Búðu til verkefnamöppu og settu upp npm. Við búum til my-projectmöppuna og frumstillum npm með -yrökunum til að forðast að hún spyrji okkur allra gagnvirku spurninganna.

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

  2. Settu upp Webpack. Næst þurfum við að setja upp Webpack þróunarfíknina okkar: webpackfyrir kjarna Webpack, webpack-clisvo við getum keyrt Webpack skipanir frá flugstöðinni og webpack-dev-serversvo við getum keyrt staðbundinn þróunarþjón. Við notum --save-devtil að gefa til kynna að þessi ósjálfstæði séu aðeins til notkunar í þróun en ekki til framleiðslu.

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

  3. Settu upp Bootstrap. Nú getum við sett upp Bootstrap. Við munum einnig setja upp Popper þar sem fellivalmyndir okkar, sprettigluggar og verkfæraleiðbeiningar eru háðar staðsetningu þeirra. Ef þú ætlar ekki að nota þessa íhluti geturðu sleppt Popper hér.

    npm i --save bootstrap @popperjs/core

  4. Settu upp fleiri ósjálfstæði. Til viðbótar við Webpack og Bootstrap, þurfum við nokkrar fleiri ósjálfstæðir til að flytja inn og sameina Bootstrap's CSS og JS með Webpack. Þar á meðal eru Sass, sumir hleðslutæki og Autoprefixer.

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

Nú þegar við höfum öll nauðsynleg ósjálfstæði uppsett, getum við byrjað að búa til verkefnaskrárnar og flytja inn Bootstrap.

Uppbygging verkefnis

Við höfum þegar búið til my-projectmöppuna og frumstillt npm. Nú munum við líka búa til okkar srcog distmöppur til að klára verkefnisskipulagið. Keyrðu eftirfarandi úr my-project, eða búðu til handvirkt möppuna og skráarskipulagið sem sýnt er hér að neðan.

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

Þegar þú ert búinn ætti heildarverkefnið þitt að líta svona út:

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

Á þessum tímapunkti er allt á réttum stað, en Webpack mun ekki virka vegna þess að við höfum ekki fyllt út okkar webpack.config.jsennþá.

Stilla Webpack

Með ósjálfstæði uppsett og verkefnamöppan okkar tilbúin fyrir okkur til að byrja að kóða, getum við nú stillt Webpack og keyrt verkefnið okkar á staðnum.

  1. Opnaðu webpack.config.jsí ritlinum þínum. Þar sem það er autt, þurfum við að bæta einhverjum boilerplate config við það svo við getum ræst þjóninn okkar. Þessi hluti af stillingunni segir Webpack að leita að JavaScript verkefnisins okkar, hvar á að gefa út samantekna kóðann í ( dist), og hvernig þróunarþjónninn ætti að haga sér (draga úr distmöppunni með heitri endurhleðslu).

    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. Næst fyllum við út okkar dist/index.html. Þetta er HTML síðan sem Webpack mun hlaða í vafranum til að nota búnt CSS og JS sem við munum bæta við það í síðari skrefum. Áður en við getum gert það verðum við að gefa því eitthvað til að gera og innihalda outputJS frá fyrra skrefi.

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

    Við erum að setja smá af Bootstrap stíl hér með div class="container"og <button>svo að við sjáum hvenær CSS Bootstrap er hlaðið af Webpack.

  3. Nú þurfum við npm skriftu til að keyra Webpack. Opnaðu package.jsonog bættu við starthandritinu sem sýnt er hér að neðan (þú ættir nú þegar að hafa prófunarforskriftina). Við munum nota þetta handrit til að ræsa staðbundna Webpack þróunarþjóninn okkar.

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

  4. Og loksins getum við byrjað Webpack. Í my-projectmöppunni í flugstöðinni þinni skaltu keyra þetta nýlega bætta npm forskrift:

    npm start
    Webpack þróunarþjónn í gangi

Í næsta og síðasta hluta þessarar handbókar munum við setja upp Webpack hleðslutækin og flytja inn allt CSS og JavaScript frá Bootstrap.

Flytja inn Bootstrap

Innflutningur Bootstrap í Webpack krefst hleðslutækja sem við settum upp í fyrsta hlutanum. Við höfum sett þá upp með npm, en nú þarf að stilla Webpack til að nota þá.

  1. Settu upp hleðslutækin í webpack.config.js. Stillingarskránni þinni er nú lokið og ætti að passa við brotið hér að neðan. Eini nýi hlutinn hér er modulekaflinn.

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

    Hér er samantekt á því hvers vegna við þurfum öll þessi hleðslutæki. style-loaderdælir CSS inn í <style>frumefni <head>á HTML síðunni, css-loaderhjálpar við að nota @importog url(), postcss-loaderer nauðsynlegt fyrir Autoprefixer og sass-loadergerir okkur kleift að nota Sass.

  2. Nú skulum við flytja inn CSS Bootstrap. Bættu eftirfarandi við til src/scss/styles.scssað flytja inn allan uppruna Sass frá Bootstrap.

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

    Þú getur líka flutt inn stílblöðin okkar fyrir sig ef þú vilt. Lestu Sass innflutningsskjölin okkar fyrir frekari upplýsingar.

  3. Næst hleðum við CSS og flytjum inn JavaScript Bootstrap. Bættu eftirfarandi við til src/js/main.jsað hlaða CSS og flytja inn alla Bootstrap's JS. Popper verður fluttur inn sjálfkrafa í gegnum Bootstrap.

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

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

    Þú getur líka flutt inn JavaScript viðbætur hver fyrir sig eftir þörfum til að halda búntastærðum niðri:

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

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

    Lestu JavaScript skjölin okkar til að fá frekari upplýsingar um hvernig á að nota viðbætur Bootstrap.

  4. Og þú ert búinn! 🎉 Með uppruna Sass og JS frá Bootstrap fullhlaðin ætti staðbundinn þróunarþjónn þinn núna að líta svona út.

    Webpack þróunarþjónn sem keyrir með Bootstrap

    Nú geturðu byrjað að bæta við hvaða Bootstrap íhlutum sem þú vilt nota. Vertu viss um að skoða heildar Webpack dæmi verkefnið um hvernig á að innihalda viðbótar sérsniðið Sass og fínstilla byggingu þína með því að flytja aðeins inn þá hluta Bootstrap CSS og JS sem þú þarft.

Framleiðsluhagræðingar

Það fer eftir uppsetningu þinni, þú gætir viljað innleiða nokkrar viðbótaröryggis- og hraðastillingar sem eru gagnlegar til að keyra verkefnið í framleiðslu. Athugaðu að þessar hagræðingar eru ekki notaðar á Webpack dæmi verkefninu og er undir þér komið að útfæra.

Að draga út CSS

Það style-loadersem við stilltum hér að ofan sendir CSS á þægilegan hátt í búntinn þannig að dist/index.htmlekki er nauðsynlegt að hlaða CSS skrá handvirkt inn. Þessi nálgun gæti hins vegar ekki virkað með ströngum öryggisstefnu um efni og hún gæti orðið flöskuháls í umsókn þinni vegna stórrar búntastærðar.

Til að aðskilja CSS þannig að við getum hlaðið það beint frá dist/index.html, notaðu mini-css-extract-loaderWebpack viðbótina.

Settu fyrst upp viðbótina:

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

Settu síðan upp og notaðu viðbótina í uppsetningu 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
           },
           {

Eftir að hafa keyrt npm run buildaftur mun það koma ný skrá dist/main.csssem mun innihalda allt CSS sem flutt er inn af src/js/main.js. Ef þú skoðar dist/index.htmlí vafranum þínum núna vantar stílinn, eins og hann er núna í dist/main.css. Þú getur látið mynda CSS fylgja með dist/index.htmlsvona:

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

Að draga út SVG skrár

CSS Bootstrap inniheldur margar tilvísanir í SVG skrár í gegnum innbyggða data:URI. Ef þú skilgreinir efnisöryggisstefnu fyrir verkefnið þitt sem hindrar data:URI fyrir myndir, þá hlaðast þessar SVG skrár ekki. Þú getur komist í kringum þetta vandamál með því að draga út innbyggðu SVG skrárnar með því að nota eignaeiningareiginleika Webpack.

Stilltu Webpack til að draga út innbyggðar SVG skrár eins og þetta:

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

Eftir að hafa keyrt npm run buildaftur muntu finna SVG skrárnar sem eru unnar út í dist/iconsCSS og vísað til þeirra á réttan hátt.

Sérðu eitthvað rangt eða úrelt hér? Vinsamlegast opnaðu mál á GitHub . Þarftu hjálp við bilanaleit? Leitaðu eða byrjaðu umræðu á GitHub.