Tlolela go diteng tše kgolo Tlolela go docs navigation
Check
in English

Bootstrap & Sephuthelwana sa Wepesaete

Tlhahlo ya semmušo ya ka moo o ka akaretšago le go kgoboketša CSS le JavaScript ya Bootstrap mo protšekeng ya gago o diriša Webpack.

Letlakaleng le
O nyaka go tlola go fihla mafelelong? Download khoutu ya mohlodi le demo ya go šoma ya tlhahlo ye go tšwa polokelong ya twbs/examples . O ka bula gape mohlala ka go StackBlitz bakeng sa go rulaganya ka go phela.

Beakanya

Re aga projeke ya Webpack ka Bootstrap go tšwa mathomong, ka fao go na le dinyakwa tše dingwe tša pele le dikgato tša pele pele re ka thoma e le ka kgonthe. Tlhahlo ye e nyaka gore o be le Node.js yeo e hlomilwego le go tlwaelana mo gongwe le terminal.

  1. Theha foldara ya porojeke e ne le setup npm. Re tla hlama my-projectfoltara gomme ra thoma npm ka -yngangišano go efoga go re botšiša dipotšišo ka moka tša tirišano.

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

  2. Tsenya Webpack. Se se latelago re swanetše go tsenya ditshepetšo tša rena tša tlhabollo ya Webpack: webpackbakeng sa mokokotlo wa Webpack, webpack-cligore re kgone go sepetša ditaelo tša Webpack go tšwa go terminal, le webpack-dev-servergore re kgone go sepetša seva ya tlhabollo ya selegae. Re šomiša --save-devgo laetša gore ditshepetšo tše ke tša tšhomišo ya tlhabollo fela e sego tša tšweletšo.

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

  3. Kenya Bootstrap. Bjale re ka tsenya Bootstrap. Re tla tsenya gape Popper ka ge di-dropdown tša rena, di-popover, le di-tooltips di ithekgile ka yona bakeng sa go beakanya ga tšona. Ge o sa rulaganye go šomiša dikarolo tšeo, o ka tlogela Popper mo.

    npm i --save bootstrap @popperjs/core

  4. Tsenya ditshepetšo tša tlaleletšo. Go tlaleletša go Webpack le Bootstrap, re hloka go ithekga gape ga mmalwa go tsenya ka tshwanelo le go kopanya CSS le JS ya Bootstrap le Webpack. Tše di akaretša Sass, di-loader tše dingwe, le Autoprefixer.

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

Bjale ka ge re na le ditshepetšo ka moka tše di nyakegago tše di hlomilwego, re ka tsena mošomong wa go hlama difaele tša projeke le go tsenya ka ntle Bootstrap.

Sebopego sa porojeke

Re šetše re hlotše my-projectfoldara gomme ra thoma npm. Bjale re tla hlama gape difoldara tša rena srcle distgo feleletša sebopego sa projeke. Matha tše di latelago go tšwa go my-project, goba o hlama ka seatla sebopego sa foltara le faele ye e bontšhitšwego ka mo tlase.

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

Ge o feditše, projeke ya gago ye e feletšego e swanetše go lebelega ka tsela ye:

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

Mo nakong ye, se sengwe le se sengwe se lefelong le le swanetšego, eupša Webpack e ka se šome ka gobane ga se ra tlatša ya rena webpack.config.jsgo fihla ga bjale.

Beakanya Webpack

Ka ditshepetšo tše di hlomilwego le foltara ya rena ya projeke e loketše gore re thome go ngwala dikhoutu, bjale re ka beakanya Webpack le go sepetša projeke ya rena ka mo nageng.

  1. Bula webpack.config.jska go morulaganyi wa gago. Ka ge e se na selo, re tla swanelwa ke go oketša config ye nngwe ya boilerplate go yona gore re kgone go thoma seva ya rena. Karolo ye ya config e botša Webpack e be e le go nyaka JavaScript ya projeke ya rena, moo ba swanetšego go ntšha khoutu ye e kgobokeditšwego go ( dist), le kamoo seva ya tlhabollo e swanetšego go itshwara ka gona (go goga go tšwa go distfoltara ka go laetša gape mo go fišago).

    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. Se se latelago re tlatša dist/index.html. Ye ke letlakala la HTML leo Webpack e tlago go laetša ka gare ga sephephediši go šomiša CSS yeo e kopantšwego le JS yeo re tlago e tlaleletša go yona megatong ya ka morago. Pele re ka dira seo, re swanetše go e fa selo sa go tšweletša le go akaretša outputJS go tšwa mogatong wa go feta.

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

    Re akaretša go se nene ga go setaele ga Bootstrap mo ka div class="container"le <button>gore re bone ge CSS ya Bootstrap e imelwa ke Webpack.

  3. Bjale re hloka script ya npm go sepetša Webpack. Bula package.jsongomme o tlaleletše startsengwalwa seo se bontšhitšwego ka mo tlase (o swanetše go ba o šetše o na le sengwalwa sa teko). Re tla šomiša sengwalwa se go thoma seva ya rena ya selegae ya Webpack dev.

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

  4. Gomme mafelelong, re ka thoma Webpack. Go tšwa go my-projectfoltara ka gare ga terminal ya gago, sepetša sengwalwa seo sa npm seo se sa tšwago go okeletšwa:

    npm start
    Webpack dev seva e matha

Karolong ye e latelago le ya mafelelo go tlhahlo ye, re tla hloma di-loader tša Webpack gomme ra tsenya ka moka ga CSS le JavaScript ya Bootstrap.

Tsenya ka ntle Bootstrap

Go tsenya Bootstrap ka gare ga Webpack go nyaka di-loader tšeo re di tsentšego karolong ya mathomo. Re di tsentše ka npm, eupša bjale Webpack e swanetše go beakanywa gore e di šomiše.

  1. Beakanya di-loader ka webpack.config.js. Faele ya gago ya peakanyo bjale e feletše gomme e swanetše go swana le seripa se se lego ka mo tlase. Karolo e mpsha feela mo ke modulekarolo.

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

    Here’s a recap of why re hloka di loader tše ka moka. style-loadere tsenya CSS ka gare ga <style>elemente ka go <head>ya letlakala la HTML, css-loadere thuša ka go šomiša @importle url(), postcss-loadere nyakega bakeng sa Autoprefixer, gomme sass-loadere re dumelela go diriša Sass.

  2. Bjale, a re tsenyeng CSS ya Bootstrap. Oketša tše di latelago go src/scss/styles.scssgo tsenya ka moka ga mohlodi wa Bootstrap Sass.

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

    O ka tsenya gape le matlakala a rena a ditaele ka botee ge o nyaka. Bala ditokomane tša rena tša go tsenya ka ntle tša Sass bakeng sa dintlha.

  3. Se se latelago re laetša CSS gomme re tsenya JavaScript ya Bootstrap. Oketša tše di latelago go src/js/main.jsgo laetša CSS gomme o tsenye ka moka ga JS ya Bootstrap. Popper e tla tlišwa ka ntle ka go itiragalela ka Bootstrap.

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

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

    O ka tsenya gape di-plugin tša JavaScript ka botee ge go nyakega go boloka bogolo bja diphuthelwana bo le fase:

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

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

    Bala ditokomane tša rena tša JavaScript bakeng sa tshedimošo e oketšegilego mabapi le kamoo o ka dirišago di-plugin tša Bootstrap.

  4. Gomme o feditše! 🎉 Ka mohlodi wa Bootstrap Sass le JS di imelwa ka botlalo, seva ya gago ya tlhabollo ya selegae bjale e swanetše go lebelega ka tsela ye.

    Webpack dev seva matha le Bootstrap

    Bjale o ka thoma go oketša dikarolo dife goba dife tša Bootstrap tšeo o nyakago go di diriša. Kgonthiša gore o hlahloba projeke ya mohlala ya Webpack ye e feletšego ya kamoo o ka akaretšago Sass ya tlaleletšo ya tlwaelo le go kaonafatša go aga ga gago ka go tsenya ka ntle fela dikarolo tša CSS le JS tša Bootstrap tšeo o di hlokago.

Diphetošo tša tšweletšo

Go ya ka peakanyo ya gago, o ka nyaka go phethagatša diphetogo tše dingwe tša tlaleletšo tša tšhireletšo le lebelo tšeo di nago le mohola bakeng sa go sepetša projeke tšweletšong. Hlokomela gore diphetogo tše ga di dirišwe go porojeke ya mohlala ya Webpack gomme di go wena go di phethagatša.

Go ntšha CSS

The style-loaderre hlophisitsoeng ka holimo loketseng emits CSS ka bundle e le hore ka letsoho loading e CSS faele ka dist/index.htmle ke ke hlokahala. Mokgwa wo o ka no se šome ka Pholisi ya Tšhireletšo ya Diteng ye e tiilego, le ge go le bjalo, gomme o ka fetoga bottleneck tirišong ya gago ka lebaka la bogolo bja sehlopha se segolo.

Go aroganya CSS gore re kgone go e laetša thwii go tšwa go dist/index.html, šomiša mini-css-extract-loaderplugin ya Webpack.

Pele, kenya plugin:

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

Ke moka o dire mohlala gomme o diriše plugin ka go peakanyo ya 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
           },
           {

Ka morago ga go kitima npm run buildgape, go tla ba le faele ye mpsha dist/main.css, yeo e tlago ba le ka moka ga CSS yeo e tsentšwego ka ntle ke src/js/main.js. Ge o lebelela dist/index.htmlka go sephephediši sa gago bjale, setaele se tla be se hlaela, ka ge se le gona bjale go dist/main.css. O ka akaretša CSS ye e tšweleditšwego ka go dist/index.htmlswana le ye:

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

Go ntšha difaele tša SVG

CSS ya Bootstrap e akaretša ditšhupetšo tše ntši go difaele tša SVG ka di data:-URI tša ka gare ga mothaladi. Ge o hlaloša Pholisi ya Tšhireletšo ya Diteng ya porojeke ya gago yeo e thibelago data:di-URI tša diswantšho, gona difaele tše tša SVG di ka se laetše. O ka kgona go dikologa bothata bjo ka go ntšha difaele tša SVG tša ka gare ga mothaladi o diriša tšobotsi ya dimmojule tša dithoto tša Webpack.

Beakanya Webpack go ntšha difaele tša SVG tša ka gare ga mothaladi ka tsela ye:

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

Ka morago ga go kitima npm run buildgape, o tla hwetša difaele tša SVG di ntšhitšwe ka gare dist/iconsle go šupša gabotse go tšwa go CSS.

O bona selo se sengwe se se fošagetšego goba seo se fetilwego ke nako mo? Hle bula taba go GitHub . O hloka thušo ya go rarolla mathata? Batla goba o thome poledišano go GitHub.