Saltatu eduki nagusira Saltatu dokumentuen nabigaziora
Check
in English

Bootstrap eta Webpack

Webpack erabiliz Bootstrap-en CSS eta JavaScript zure proiektuan sartzeko eta lotzeko gida ofiziala.

Orrialde honetan
Amaierara joan nahi? Deskargatu gida honen iturburu-kodea eta lan-demoa twbs/examples biltegitik . StackBlitz-en ere ireki dezakezu adibidea zuzeneko ediziorako.

Konfigurazioa

Webpack proiektu bat eraikitzen ari gara Bootstrap-ekin hutsetik, beraz, aurrebaldintza eta urrats batzuk daude benetan hasteko. Gida honek Node.js instalatuta eta terminala nolabait ezagutzea eskatzen du.

  1. Sortu proiektuaren karpeta eta konfiguratu npm. Karpeta sortuko dugu my-projecteta argumentuarekin npm hasieratuko -ydugu galdera interaktibo guztiak ez egiteko.

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

  2. Instalatu Webpack. Jarraian, gure Webpack garapen-mendekotasunak instalatu behar ditugu: webpackWebpack-en muinerako webpack-cli, terminaletik Webpack komandoak exekutatu ahal izateko, eta webpack-dev-servergarapen lokaleko zerbitzari bat exekutatu ahal izateko. --save-devMendekotasun horiek garapenerako erabilerarako soilik direla eta ez produkziorako soilik adierazten dugu .

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

  3. Instalatu Bootstrap. Orain Bootstrap instalatu dezakegu. Popper ere instalatuko dugu, gure goitibehurrak, popover-ak eta tresna-aholkuak kokatzearen araberakoak baitira. Osagai horiek erabiltzeko asmorik ez baduzu, Popper ezaba dezakezu hemen.

    npm i --save bootstrap @popperjs/core

  4. Instalatu menpekotasun gehigarriak. Webpack eta Bootstrap-ez gain, dependentzia gehiago behar ditugu Bootstrap-en CSS eta JS Webpack-ekin behar bezala inportatzeko eta lotzeko. Horien artean Sass, kargatzaile batzuk eta Autoaurrizkia daude.

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

Orain beharrezkoak diren mendekotasun guztiak instalatuta ditugula, proiektuaren fitxategiak sortzen eta Bootstrap inportatzen has gaitezke.

Proiektuaren egitura

my-projectKarpeta sortu eta npm hasieratu dugu dagoeneko . srcOrain gure eta karpetak ere sortuko ditugu distproiektuaren egitura biribiltzeko. Exekutatu hau hemendik my-projectedo sortu eskuz behean agertzen den karpeta eta fitxategi-egitura.

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

Amaitzen duzunean, zure proiektu osoa honelakoa izan beharko litzateke:

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

Une honetan, dena leku egokian dago, baina Webpack-ek ez du funtzionatuko, oraindik ez dugulako bete webpack.config.js.

Konfiguratu Webpack

Mendekotasunak instalatuta eta gure proiektuaren karpeta prest kodetzen hasteko, orain Webpack konfiguratu eta gure proiektua lokalean exekutatu dezakegu.

  1. Ireki webpack.config.jszure editorean. Hutsik dagoenez, boilerplate konfigurazio batzuk gehitu beharko dizkiogu, gure zerbitzaria abiarazi ahal izateko. Konfigurazioaren zati honek Webpack-ek gure proiektuaren JavaScript-a bilatu behar zuela dio, konpilatutako kodea non atera behar den ( dist) eta garapen-zerbitzariak nola jokatu behar duen ( distkarpetatik aterata birkarga beroarekin).

    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. Jarraian, gure dist/index.html. Hau da Webpack-ek arakatzailean kargatuko duen HTML orria geroago gehituko ditugun CSS eta JS-a erabiltzeko. Hori egin aurretik, zerbait eman behar diogu errendatzeko eta outputaurreko urratseko JS-a sartzeko.

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

    Bootstrap estiloaren apur bat sartzen ari gara hemen div class="container"eta , <button>beraz, Bootstrap-en CSS Webpack-ek noiz kargatzen duen ikus dezagun.

  3. Orain npm script bat behar dugu Webpack exekutatzeko. Ireki package.jsoneta gehitu startbehean agertzen den script-a (dagoeneko proba-scripta izan beharko zenuke). Script hau erabiliko dugu gure tokiko Webpack dev zerbitzaria abiarazteko.

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

  4. Eta azkenik, Webpack abiarazi dezakegu. Zure terminaleko my-projectkarpetatik, exekutatu gehitu berri den npm script hori:

    npm start
    Webpack dev zerbitzaria martxan

Gida honen hurrengo eta azken atalean, Webpack kargatzaileak konfiguratuko ditugu eta Bootstrap-en CSS eta JavaScript guztiak inportatuko ditugu.

Inportatu Bootstrap

Bootstrap Webpack-era inportatzeko lehen atalean instalatu ditugun kargatzaileak behar dira. Npm-rekin instalatu ditugu, baina orain Webpack konfiguratu behar da horiek erabiltzeko.

  1. Konfiguratu kargagailuak urtean webpack.config.js. Zure konfigurazio fitxategia osatu da eta beheko zatiarekin bat etorri beharko luke. Hemen atal berri bakarra moduleatala da.

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

    Hona hemen kargagailu guzti hauek zergatik behar ditugun laburbiltzen. style-loaderCSS HTML orrialdeko <style>elementu batean sartzen du, eta erabiltzen laguntzen du , Autoaurrizkirako beharrezkoa da eta Sass erabiltzeko aukera ematen digu.<head>css-loader@importurl()postcss-loadersass-loader

  2. Orain, inporta dezagun Bootstrap-en CSS. Gehitu honako hau src/scss/styles.scssBootstrap-en Sass iturburu guztia inportatzeko.

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

    Nahi izanez gero, gure estilo-orriak banaka inporta ditzakezu. Irakurri gure Sass inportazio dokumentuak xehetasunetarako.

  3. Ondoren CSS kargatu eta Bootstrap-en JavaScript inportatuko dugu. Gehitu honako hau src/js/main.jsCSS kargatzeko eta Bootstrap-en JS guztiak inportatzeko. Popper automatikoki inportatuko da Bootstrap bidez.

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

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

    JavaScript pluginak ere inporta ditzakezu banan-banan, behar izanez gero, sorta-tamainak txikiagotzeko:

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

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

    Irakurri gure JavaScript dokumentuak Bootstrap-en pluginak nola erabiltzeari buruzko informazio gehiago lortzeko.

  4. Eta listo! 🎉 Bootstrap-en Sass eta JS iturburua guztiz kargatuta dagoenez, zure tokiko garapen zerbitzariak honela izango luke orain.

    Webpack dev zerbitzaria Bootstrap-ekin martxan

    Orain erabili nahi dituzun Bootstrap osagaiak gehitzen has zaitezke. Ziurtatu Webpack adibideko proiektu osoa ikusteko Sass pertsonalizatu osagarriak nola sartu eta zure eraikuntza optimizatu behar dituzun Bootstrap-en CSS eta JS zatiak soilik inportatuz.

Produkzioaren optimizazioak

Zure konfigurazioaren arabera, proiektua produkzioan exekutatzeko erabilgarriak diren segurtasun eta abiadura optimizazio gehigarri batzuk ezarri nahi dituzu. Kontuan izan optimizazio hauek ez direla Webpack adibideko proiektuan aplikatzen eta zuk inplementatzea dagokizula.

CSS ateratzen

style-loaderGoian konfiguratu dugunak CSS sortara igortzen du, CSS fitxategi bat eskuz kargatzea beharrezkoa dist/index.htmlez dadin. Ikuspegi honek agian ez du funtzionatuko Edukiaren Segurtasun-Politika zorrotz batekin, eta baliteke zure aplikazioan estutu bihurtzea sortaren tamaina handia dela eta.

CSS bereizteko, zuzenean kargatu ahal dist/index.htmlizateko, erabili mini-css-extract-loaderWebpack plugina.

Lehenik eta behin, instalatu plugina:

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

Ondoren, instantziatu eta erabili plugina Webpack konfigurazioan:

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

Berriro exekutatu ondoren npm run build, fitxategi berri bat egongo da dist/main.css, eta horrek inportatutako CSS guztiak edukiko ditu src/js/main.js. Orain zure arakatzailean ikusten baduzu dist/index.html, estiloa faltako da, orain dist/main.css. dist/index.htmlSortutako CSS-a honela sar dezakezu :

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

Bootstrap-en CSS-ek SVG fitxategien erreferentzia ugari biltzen ditu lineako data:URIen bidez. Irudien URIak blokeatzen dituen Edukien Segurtasun-politika definitzen baduzu zure proiekturako data:, orduan SVG fitxategi hauek ez dira kargatuko. Arazo hau konpon dezakezu lineako SVG fitxategiak ateraz Webpack-en aktibo moduluen funtzioa erabiliz.

Konfiguratu Webpack lineako SVG fitxategiak honela ateratzeko:

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

Berriro exekutatu ondoren , CSS-tik ateratako eta behar bezala erreferentziatutako npm run buildSVG fitxategiak aurkituko dituzu .dist/icons

Zerbait gaizki edo zaharkitua ikusten duzu hemen? Mesedez , ireki arazo bat GitHub-en . Laguntza behar duzu arazoak konpontzeko? Bilatu edo hasi eztabaida bat GitHub-en.