Bootstrap & Webpack

Virallinen opas Bootstrapin CSS:n ja JavaScriptin sisällyttämiseen ja yhdistämiseen projektiisi Webpackin avulla.

Tällä sivulla

Haluatko hypätä loppuun? Lataa tämän oppaan lähdekoodi ja toimiva demo twbs/examples -varastosta . Voit myös avata esimerkin StackBlitzissä live-muokkausta varten.

Perustaa

Rakennamme Webpack-projektia Bootstrapin avulla tyhjästä, joten meillä on joitain edellytyksiä ja alkuvaiheita ennen kuin voimme todella aloittaa. Tämä opas edellyttää, että sinulla on Node.js asennettuna ja terminaalin tuntemus.

Luo projektikansio ja määritä npm. Luomme my-projectkansion ja alustamme npm:n -yargumentilla, jotta se ei kysy meiltä kaikkia interaktiivisia kysymyksiä.
```
mkdir my-project && cd my-project
npm init -y
```
Asenna Webpack. Seuraavaksi meidän on asennettava Webpack-kehitysriippuvuutemme: webpackWebpackin ytimeen, webpack-clijotta voimme suorittaa Webpack-komentoja päätteestä ja webpack-dev-serverjotta voimme käyttää paikallista kehityspalvelinta. Käytämme --save-devviestiä siitä, että nämä riippuvuudet ovat vain kehityskäyttöön eivätkä tuotantoon.
```
npm i --save-dev webpack webpack-cli webpack-dev-server
```
Asenna Bootstrap. Nyt voimme asentaa Bootstrapin. Asennamme myös Popperin, koska pudotusvalikot, ponnahdusikkunamme ja työkaluvinkkimme riippuvat siitä niiden sijainnista. Jos et aio käyttää näitä komponentteja, voit jättää Popperin pois täältä.
```
npm i --save bootstrap @popperjs/core
```
Asenna lisäriippuvuuksia. Webpackin ja Bootstrapin lisäksi tarvitsemme vielä muutamia riippuvuuksia Bootstrapin CSS:n ja JS:n oikein tuomiseksi ja niputtamiseksi Webpackin kanssa. Näitä ovat Sass, jotkut kuormaajat ja Autoprefixer.
```
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
```

Nyt kun kaikki tarvittavat riippuvuudet on asennettu, voimme aloittaa projektitiedostojen luomisen ja Bootstrapin tuomisen.

Hankkeen rakenne

Olemme jo luoneet my-projectkansion ja alustaneet npm:n. Nyt luomme myös kansioitamme srcja distkansioita täydentämään projektin rakennetta. Suorita seuraava osoitteesta my-projecttai luo manuaalisesti alla näkyvä kansio- ja tiedostorakenne.

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

Kun olet valmis, koko projektisi pitäisi näyttää tältä:

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

Tässä vaiheessa kaikki on oikeassa paikassa, mutta Webpack ei toimi, koska emme ole vielä täyttäneet webpack.config.js.

Määritä Webpack

Kun riippuvuudet on asennettu ja projektikansiomme on valmis aloittamaan koodauksen, voimme nyt määrittää Webpackin ja suorittaa projektimme paikallisesti.

Avaa webpack.config.jseditorissasi. Koska se on tyhjä, meidän on lisättävä siihen joitakin yleiskuvausasetuksia, jotta voimme käynnistää palvelimemme. Tämä osa konfiguraatiosta kertoo Webpackin etsivän projektimme JavaScriptiä, mistä käännetty koodi tulostetaan osoitteeseen ( dist) ja kuinka kehityspalvelimen tulisi käyttäytyä (poimimaan distkansiosta hot reloadilla).
```
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
  }
}
```

Seuraavaksi täytämme dist/index.html. Tämä on HTML-sivu, jonka Webpack lataa selaimeen käyttääkseen mukana toimitettua CSS:ää ja JS:ää, jonka lisäämme siihen myöhemmissä vaiheissa. Ennen kuin voimme tehdä sen, meidän on annettava sille jotain renderoitavaa ja sisällytettävä outputedellisen vaiheen JS.

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

Lisäämme tähän hieman Bootstrap-tyyliä div class="container"ja <button>jotta näemme, milloin Webpack lataa Bootstrapin CSS:n.

Nyt tarvitsemme npm-komentosarjan Webpackin suorittamiseen. Avaa package.jsonja lisää startalla näkyvä skripti (sinulla pitäisi jo olla testiskripti). Käytämme tätä komentosarjaa paikallisen Webpack-kehittäjäpalvelimen käynnistämiseen.
```
{
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Ja lopuksi voimme aloittaa Webpackin. Suorita äskettäin lisätty npm-skripti terminaalisi my-projectkansiosta:
```
npm start
```

Tämän oppaan seuraavassa ja viimeisessä osiossa määritämme Webpack-lataajat ja tuomme kaikki Bootstrapin CSS- ja JavaScript-koodit.

Tuo Bootstrap

Bootstrapin tuominen Webpackiin vaatii ensimmäisessä osiossa asentamamme lataajat. Olemme asentaneet ne npm:llä, mutta nyt Webpack on määritettävä käyttämään niitä.

Asenna kuormaajat sisään webpack.config.js. Määritystiedostosi on nyt valmis ja sen pitäisi vastata alla olevaa katkelmaa. Ainoa uusi osa tässä on modulejakso.

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

Tässä on yhteenveto siitä, miksi tarvitsemme kaikkia näitä kuormaajia. style-loaderruiskuttaa CSS :n HTML-sivun <style>elementtiin , auttaa ja käytössä , tarvitaan Autoprefixerille ja sallii Sassin käytön.<head>css-loader@importurl()postcss-loadersass-loader

Tuodaan nyt Bootstrapin CSS. Lisää seuraava src/scss/styles.scsskohtaan tuodaksesi kaikki Bootstrapin lähdekoodit Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Voit halutessasi myös tuoda tyylisivumme yksitellen. Lue lisätietoja Sass-tuontiasiakirjoistamme .
Seuraavaksi lataamme CSS:n ja tuomme Bootstrapin JavaScriptin. Lisää seuraava src/js/main.jskohtaan ladataksesi CSS ja tuodaksesi kaikki Bootstrapin JS-tiedostot. Popper tuodaan automaattisesti Bootstrapin kautta.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Voit myös tuoda JavaScript-laajennuksia yksitellen tarpeen mukaan pitääksesi nippukoot pienenä:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Lue JavaScript-dokumenteistamme lisätietoja Bootstrapin lisäosien käytöstä.
Ja olet valmis! 🎉 Kun Bootstrapin lähde Sass ja JS on ladattu täyteen, paikallisen kehityspalvelimesi pitäisi nyt näyttää tältä.

Nyt voit aloittaa minkä tahansa Bootstrap-komponenttien lisäämisen, joita haluat käyttää. Muista tarkistaa täydellinen Webpack-esimerkkiprojekti , kuinka voit sisällyttää mukautettuja Sass-tiedostoja ja optimoida koontiversiosi tuomalla vain tarvitsemasi Bootstrapin CSS- ja JS-osat.

Tuotannon optimoinnit

Asetuksistasi riippuen saatat haluta toteuttaa joitain lisäturva- ja nopeusoptimointeja, jotka ovat hyödyllisiä projektin suorittamiseksi tuotannossa. Huomaa, että näitä optimointeja ei käytetä Webpack-esimerkkiprojektissa, ja ne on sinun tehtäväsi toteuttaa.

Puretaan CSS

Yllä style-loadermäärittämämme lähettää kätevästi CSS:n nippuun, joten CSS-tiedoston manuaalinen lataaminen dist/index.htmlei ole tarpeen. Tämä lähestymistapa ei kuitenkaan välttämättä toimi tiukan sisällön suojauskäytännön kanssa, ja siitä voi tulla sovelluksesi pullonkaula suuren nippukoon vuoksi.

Erota CSS, jotta voimme ladata sen suoraan osoitteesta dist/index.html, käyttämällä mini-css-extract-loaderWebpack-laajennusta.

Asenna ensin laajennus:

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

Instantoi sitten ja käytä laajennusta Webpack-kokoonpanossa:

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

Uudelleen suorituksen npm run buildjälkeen tulee uusi tiedosto dist/main.css, joka sisältää kaiken käyttäjän tuoman CSS:n src/js/main.js. Jos tarkastelet dist/index.htmlnyt selaimessasi, tyyli puuttuu, koska se on nyt dist/main.css. Voit sisällyttää luodun CSS:n dist/index.htmlseuraavasti:

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

Puretaan SVG-tiedostoja

Bootstrapin CSS sisältää useita viittauksia SVG-tiedostoihin upotetun data:URI:n kautta. Jos määrität projektillesi sisällön suojauskäytännön, joka estää data:kuvien URI:t, nämä SVG-tiedostot eivät lataudu. Voit kiertää tämän ongelman purkamalla upotetut SVG-tiedostot Webpackin omaisuusmoduuliominaisuuden avulla.

Määritä Webpack purkamaan upotetut SVG-tiedostot seuraavasti:

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

Kun olet suorittanut npm run buildsen uudelleen, löydät SVG-tiedostot purettuna dist/iconsCSS:ään ja niihin viitataan oikein.

Näetkö tässä jotain vialla tai vanhentunutta? Avaa ongelma GitHubissa . Tarvitsetko apua vianetsinnässä? Hae tai aloita keskustelu GitHubissa.