Jya ku bintu nyamukuru Jya kuri docs
Check
in English

Bootstrap & Urubuga

Ubuyobozi bwemewe bwo gushyiramo no guhuza CSS na JavaScript ya Bootstrap mumushinga wawe ukoresheje Webpack.

Kuriyi page
Urashaka gusimbuka kugeza imperuka? Kuramo inkomoko yinkomoko hamwe na demo ikora kuriyi mfashanyigisho kuva ububiko bwa twbs / ingero . Urashobora kandi gufungura urugero muri StackBlitz kugirango uhindure neza.

Gushiraho

Turimo kubaka umushinga wa Webpack hamwe na Bootstrap kuva kera, nuko haribintu bimwe bisabwa hamwe nintambwe yimbere mbere yuko dushobora gutangira. Aka gatabo kagusaba kugira Node.js yashyizwemo kandi umenyereye na terminal.

  1. Kora umushinga wububiko hanyuma ushireho npm. Tuzakora my-projectububiko hanyuma dutangire npm hamwe -ynimpaka kugirango twirinde kutubaza ibibazo byose byimikorere.

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

  2. Shyiramo Urubuga. Ibikurikira dukeneye kwinjizamo iterambere ryurubuga rwa interineti: webpackkubwibanze bwa Webpack, webpack-clikugirango dushobore gukoresha Webpack amategeko kuva kuri terminal, webpack-dev-serverbityo rero dushobora gukoresha seriveri yiterambere ryibanze. Dukoresha --save-devkwerekana ko ibyo biterwa ari ugukoresha iterambere gusa ntabwo ari umusaruro.

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

  3. Shyiramo Bootstrap. Ubu turashobora gushiraho Bootstrap. Tuzashyiraho kandi Popper kuva ibitonyanga, popovers, hamwe nibikoresho byifashishwa kubirindiro byabo. Niba udateganya gukoresha ibyo bice, urashobora gusiba Popper hano.

    npm i --save bootstrap @popperjs/core

  4. Shyiramo izindi nkunga. Usibye Webpack na Bootstrap, dukeneye ibindi bike biterwa kugirango twinjize neza kandi duhuze CSS na JS ya Bootstrap hamwe na Webpack. Harimo Sass, abayitwara bamwe, na Autoprefixer.

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

Noneho ko dufite ibyangombwa byose bikenewe byashyizweho, dushobora kubona akazi ko gukora dosiye zumushinga no gutumiza Bootstrap.

Imiterere yumushinga

Tumaze gukora my-projectububiko no gutangiza npm. Noneho tuzakora kandi ububiko bwacu srckugirango disttuzenguruke imiterere yumushinga. Koresha ibikurikira kuva my-project, cyangwa intoki ukore ububiko nububiko bwa dosiye byerekanwe hepfo.

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

Iyo urangije, umushinga wawe wuzuye ugomba kumera gutya:

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

Kuri ubu, ibintu byose biri ahantu heza, ariko Webpack ntabwo izakora kuko tutaruzuza webpack.config.js.

Shiraho Urubuga

Hamwe nubwishingizi bwashizweho hamwe nububiko bwumushinga witeguye kugirango dutangire coding, ubu dushobora gushiraho Webpack hanyuma tugakora umushinga waho.

  1. Fungura webpack.config.jsmu mwanditsi wawe. Kubera ko ari ubusa, tuzakenera kongeramo ibyuma bimwe kugirango tubashe gutangira seriveri. Iki gice cya config kibwira Webpack kwari gushakisha JavaScript yumushinga wacu, aho dushobora gusohora code yakusanyirijwe kuri ( dist), nuburyo seriveri yiterambere igomba kwitwara (gukuramo distmububiko hamwe na reload ishyushye).

    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. Ubutaha twuzuza ibyacu dist/index.html. Uru nurupapuro rwa HTML Webpack izapakira muri mushakisha kugirango ukoreshe CSS ihujwe na JS tuzayongeraho mubyiciro byanyuma. Mbere yo gukora ibyo, tugomba kuyiha ikintu cyo gutanga no gushyiramo outputJS kuva intambwe ibanza.

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

    Turimo gushiramo akantu gato ka Bootstrap styling hano hamwe na div class="container"hamwe <button>kugirango tubone igihe CSS ya Bootstrap yuzuye na Webpack.

  3. Noneho dukeneye inyandiko ya npm kugirango dukore Webpack. Fungura package.jsonhanyuma wongereho inyandiko startyerekanwe hepfo (ugomba kuba ufite inyandiko yikizamini). Tuzakoresha iyi nyandiko kugirango dutangire seriveri yacu ya Webpack dev.

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

  4. Hanyuma, dushobora gutangira Webpack. Kuva my-projectmububiko muri terminal yawe, koresha iyo nyandiko yongeyeho npm inyandiko:

    npm start
    Webpack dev seriveri ikora

Mugice gikurikira kandi cyanyuma kuriyi mfashanyigisho, tuzashyiraho urubuga rwa Webpack hanyuma dutumize muri CSS na JavaScript ya Bootstrap yose.

Kuzana Bootstrap

Kuzana Bootstrap muri Webpack bisaba abatwara ibintu twashizeho mugice cya mbere. Twabashizeho npm, ariko ubu Webpack igomba gushyirwaho kugirango uyikoreshe.

  1. Shiraho abatwara webpack.config.js. Idosiye yawe iboneza ubu iruzuye kandi igomba guhuza ibice hepfo. Igice gishya gusa hano ni moduleigice.

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

    Dore gusubiramo impamvu dukeneye aba loaders bose. style-loaderyinjiza CSS <style>mubintu biri murupapuro <head>rwa HTML, css-loaderifasha mugukoresha @importkandi url(), postcss-loaderirakenewe kuri Autoprefixer, kandi sass-loaderitwemerera gukoresha Sass.

  2. Noneho, reka twinjize CSS ya Bootstrap. Ongeraho ibikurikira kugirango src/scss/styles.scsswinjize isoko ya Bootstrap yose Sass.

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

    Urashobora kandi gutumiza impapuro zacu muburyo bwihariye niba ubishaka. Soma ibyinjira muri Sass byinjira kubisobanuro birambuye.

  3. Ubutaha turapakira CSS hanyuma dutumiza JavaScript ya Bootstrap. Ongeraho ibikurikira kugirango src/js/main.jswikoreze CSS no gutumiza JS yose ya Bootstrap. Popper izatumizwa mu buryo bwikora binyuze muri Bootstrap.

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

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

    Urashobora kandi kwinjiza amacomeka ya JavaScript kugiti cyawe nkuko bikenewe kugirango ubunini buke bugabanuke:

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

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

    Soma inyandiko za JavaScript kugirango ubone ibisobanuro birambuye kuburyo wakoresha amacomeka ya Bootstrap.

  4. Kandi urangije! 🎉 Hamwe na Bootstrap inkomoko ya Sass na JS yuzuye, seriveri yiterambere ryibanze igomba noneho kugaragara nkiyi.

    Webpack dev seriveri ikorana na Bootstrap

    Noneho urashobora gutangira kongeramo ibice byose bya Bootstrap ushaka gukoresha. Wemeze neza kugenzura urugero rwuzuye rwa Webpack kuburyo washyiramo Sass yinyongera yihariye kandi uhindure inyubako yawe utumiza gusa ibice bya CSS na JS ya Bootstrap ukeneye.

Kunoza umusaruro

Ukurikije uko washyizeho, urashobora gushaka gushyira mubikorwa umutekano wongeyeho kandi wihuta mugukoresha umushinga mubikorwa. Menya ko ibyo byiza bidakoreshwa kumurongo wurubuga rwa webpack kandi ni wowe ugomba kubishyira mubikorwa.

Gukuramo CSS

Twashizeho style-loaderhejuru twohereza CSS muri bundle kugirango intoki zipakurura dosiye ya CSS dist/index.htmlntabwo ari ngombwa. Ubu buryo ntibushobora gukorana na Politiki ihamye yo kubungabunga umutekano, ariko, kandi birashobora guhinduka icyuho mubisabwa kubera ubunini bunini.

Gutandukanya CSS kugirango dushobore kuyipakurura bitaziguye dist/index.html, koresha mini-css-extract-loaderplugin ya Webpack.

Banza, shyiramo plugin:

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

Noneho ako kanya hanyuma ukoreshe plugin muburyo bwa 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
           },
           {

Nyuma yo npm run buildkongera gukora, hazaba dosiye nshya dist/main.css, izaba irimo CSS yose yatumijwe na src/js/main.js. Niba ureba dist/index.htmlmuri mushakisha yawe ubungubu, uburyo buzabura, nkuko bimeze ubu dist/main.css. Urashobora gushiramo CSS yakozwe dist/index.htmlnkibi:

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

Gukuramo dosiye ya SVG

CSS ya Bootstrap ikubiyemo ibintu byinshi byerekeranye na dosiye ya SVG ukoresheje umurongo data:URIs. Niba usobanura Politiki Yumutekano Ibirimo kumushinga wawe uhagarika data:URI kumashusho, noneho dosiye za SVG ntiziremerera. Urashobora gukemura iki kibazo ukuramo iniverisite ya SVG ukoresheje imiterere yumutungo wa Webpack.

Shiraho Webpack kugirango ukuremo iniverisite ya SVG nkiyi:

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

Nyuma yo npm run buildkongera gukora, uzasanga dosiye ya SVG yakuwe muri dist/iconskandi yerekanwe neza muri CSS.

Reba ikintu kibi cyangwa cyataye igihe hano? Nyamuneka fungura ikibazo kuri GitHub . Ukeneye ubufasha bwo gukemura ibibazo? Shakisha cyangwa utangire ikiganiro kuri GitHub.