Tlula eka nhlokomhaka-nkulu Tlula eka docs navigation
Check
in English

Xitirhisiwa xa ku pfula & Webpack

Nkongomiso wa ximfumo wa ndlela yo katsa na ku hlanganisa CSS na JavaScript ya Bootstrap eka phurojeke ya wena hi ku tirhisa Webpack.

Eka tluka leri
Xana u lava ku tlula ku ya fika emakumu? Download khodi ya xihlovo na demo yo tirha ya nkongomiso lowu ku suka eka vuhlayiselo bya twbs/examples . U nga ha tlhela u pfula xikombiso eka StackBlitz ku kuma ku hlela loku hanyaka.

Ku lulamisa

Hi le ku akeni ka phurojeke ya Webpack hi Bootstrap ku suka eka xiyimo xa le hansi, kutani ku na swilaveko swin’wana swa le mahlweni na magoza ya le mahlweni hi nga si sungula hakunene. Nkongomiso lowu wu lava leswaku u va na Node.js leyi nghenisiweke na ku tolovelana ko karhi na theminali.

  1. Endla folda ya phurojeke u tlhela u veka npm. Hi ta endla my-projectfolda hi sungula npm hi -yargument ku papalata leswaku yi hi vutisa swivutiso hinkwaswo swa interactive.

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

  2. Nghenisa Webpack. Endzhaku ka sweswo hi fanele ku nghenisa swititshege swa hina swa nhluvukiso wa Webpack: webpackeka xisekelo xa Webpack, webpack-clileswaku hi ta kota ku tirhisa swileriso swa Webpack ku suka eka theminali, naswona webpack-dev-serverleswaku hi ta kota ku tirhisa sevha ya nhluvukiso wa laha kaya. Hi tirhisa --save-devku kombisa leswaku ku titshega loku i ka ku tirhisiwa ka nhluvukiso ntsena ku nga ri ka vuhumelerisi.

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

  3. Nghenisa Bootstrap. Sweswi hi nga nghenisa Bootstrap. Hi ta tlhela hi nghenisa Popper tanihileswi ti-dropdown ta hina, ti-popover, na ti-toltips ti titshegeke hi yona eka xiyimo xa tona. Loko u nga kunguhati ku tirhisa swiphemu sweswo, u nga tshika Popper laha.

    npm i --save bootstrap @popperjs/core

  4. Nghenisa swilo leswi engetelekeke leswi titshegeke. Ku engetela eka Webpack na Bootstrap, hi lava swin’wana swi nga ri swingani leswi titshegeke ku nghenisa kahle na ku hlanganisa CSS na JS ya Bootstrap na Webpack. Leswi swi katsa Sass, swin’wana swo layicha, na Autoprefixer.

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

Sweswi hi nga na ti dependencies hinkwato leti lavekaka leti nghenisiweke, hi nga nghena entirhweni wo tumbuluxa tifayela ta phurojeke na ku nghenisa Bootstrap.

Xivumbeko xa phurojeke

Se hi endlile my-projectfolda hi tlhela hi sungula npm. Sweswi hi ta tlhela hi endla tifolda ta hina srcna distku rhendzeleka na xivumbeko xa phurojeke. Tirhisa leswi landzelaka ku suka eka my-project, kutani u endla hi voko folda na xivumbeko xa fayili lexi kombisiweke laha hansi.

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

Loko u hetile, phurojeke ya wena leyi heleleke yi fanele yi languteka hi ndlela leyi:

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

Eka nkarhi lowu, hinkwaswo swi le ndzhawini leyinene, kambe Webpack a yi nge tirhi hikuva a hi si tata ya hina ku webpack.config.jsfikela sweswi.

Hlela Webpack

Hi ku titshega loku nghenisiweke naswona folda ya hina ya phurojeke yi lunghekele leswaku hi sungula ku khoda, sweswi hi nga lulamisa Webpack ni ku fambisa phurojeke ya hina laha tikweni.

  1. Pfula webpack.config.jseka muhleri ​​wa wena. Leswi yi nga riki na nchumu, hi ta lava ku engetela swin’wana swa boilerplate config eka yona leswaku hi ta kota ku sungula server ya hina. Xiphemu lexi xa config xi byela Webpack leswaku a va fanele va lava JavaScript ya phurojeke ya hina, laha hi nga humesaka khodi leyi hlengeletiweke eka ( dist), ni ndlela leyi sevha ya nhluvukiso yi faneleke yi tikhoma ha yona (ku koka ku suka eka distfolda hi ku layicha nakambe hi ku hisa).

    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. Endzhaku ka sweswo hi tata dist/index.html. Leri i tluka ra HTML leri Webpack yi nga ta ri layicha eka browser ku tirhisa CSS leyi hlanganisiweke na JS leyi hi nga ta yi engetela eka yona eka magoza ya le ndzhaku. Loko hi nga si endla sweswo, hi fanele ku yi nyika swo karhi swo yi hundzuluxela ni ku katsa outputJS ku suka eka goza leri hundzeke.

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

    Hi katsa nyana Bootstrap styling laha na div class="container"na <button>leswaku hi ta vona loko CSS ya Bootstrap yi layicha hi Webpack.

  3. Sweswi hi lava npm script ku tirhisa Webpack. Pfula package.jsonu engetela starttsalwa leri kombisiweke laha hansi (u fanele se u ri na tsalwa ra xikambelo). Hi ta tirhisa script leyi ku sungula sevha ya hina ya Webpack dev ya laha kaya.

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

  4. Naswona eku heteleleni, hi nga sungula Webpack. Ku suka eka my-projectfolda eka theminali ya wena, tirhisa tsalwa rero lerintshwa ra npm leri engeteriweke:

    npm start
    Webpack dev sevha yi tirha

Eka xiyenge lexi landzelaka na xo hetelela eka nkongomiso lowu, hi ta veka switirhisiwa swo layicha swa Webpack na ku nghenisa hinkwaswo swa Bootstrap swa CSS na JavaScript.

Nghenisa Xiphepherhele xa Bootstrap

Ku nghenisa Bootstrap eka Webpack swi lava ti loader leti hi ti ngheniseke eka xiyenge xo sungula. Hi ti nghenise hi npm, kambe sweswi Webpack yi lava ku lulamisiwa leswaku yi ti tirhisa.

  1. Seta swilo swo layicha eka webpack.config.js. Fayili ya wena ya vuhlanganisi sweswi yi hetisekile naswona yi fanele ku fambisana na xiphemu lexi nga laha hansi. Xiphemu lexintshwa ntsena laha i modulexiyenge.

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

    Hi leyi recap ya leswaku hikokwalaho ka yini hi lava ti loader leti hinkwato. style-loaderyi nghenisa CSS eka <style>elemente eka <head>ya tluka ra HTML, css-loaderyi pfuneta hi ku tirhisa @importna url(), postcss-loaderyi laveka eka Autoprefixer, naswona sass-loaderyi hi pfumelela ku tirhisa Sass.

  2. Sweswi, a hi ngheniseni CSS ya Bootstrap. Engetelani leswi landzelaka eka src/scss/styles.scssku nghenisa hinkwaswo swa xihlovo xa Bootstrap xa Sass.

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

    U nga ha tlhela u nghenisa switayele swa hina hi swoxe loko u swi lava. Hlaya ti docs ta hina ta Sass import ku kuma vuxokoxoko.

  3. Endzhaku ka sweswo hi layicha CSS hi nghenisa JavaScript ya Bootstrap. Engetelani leswi landzelaka eka src/js/main.jsku layicha CSS na ku nghenisa hinkwaswo swa Bootstrap's JS. Popper yi ta nghenisiwa hi ku tisungulela hi ku tirhisa Bootstrap.

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

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

    U nga ha tlhela u nghenisa ti-plugin ta JavaScript hi toxe tanihilaha swi lavekaka hakona ku hlayisa vukulu bya bundle byi ri ehansi:

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

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

    Hlaya ti-doc ta hina ta JavaScript ku kuma vuxokoxoko byo tala bya ndlela yo tirhisa ti-plugin ta Bootstrap.

  4. Naswona u hetile! 🎉 Hi Bootstrap's source Sass na JS fully loaded, sevha ya wena ya nhluvukiso wa laha kaya sweswi yi fanele ku languteka hi ndlela leyi.

    Webpack dev server leyi tirhaka na Bootstrap

    Sweswi u nga sungula ku engetela swiphemu swihi na swihi swa Bootstrap leswi u lavaka ku swi tirhisa. Tiyisisa leswaku u languta phurojeke ya xikombiso xa Webpack leyi heleleke ya ndlela yo katsa Sass yo engetela ya ntolovelo na ku antswisa ku aka ka wena hi ku nghenisa ntsena swiphemu swa CSS na JS swa Bootstrap leswi u swi lavaka.

Ku antswisiwa ka vuhumelerisi

Ku ya hi ku lulamisiwa ka wena, u nga ha lava ku tirhisa swin’wana swo engetela swa vuhlayiseki na ku antswisiwa ka rivilo leswi pfunaka ku fambisa phurojeke eka vuhumelerisi. Xiya leswaku ku antswisiwa loku a ku tirhisiwi eka phurojeke ya xikombiso xa Webpack naswona swi le ka wena ku ku tirhisa.

Ku humesa CSS

The style-loaderhi yi hlele laha henhla hi ku olova yi humesa CSS eka bundle leswaku ku layicha hi voko fayili ya CSS eka dist/index.htmlswi nga bohi. Endlelo leri ri nga ha va ri nga tirhi na Pholisi ya Vuhlayiseki bya Vuxokoxoko lebyi tiyeke, hambiswiritano, naswona ri nga ha va xihinga eka xitirhisiwa xa wena hikwalaho ka vukulu bya bundle.

Ku hambanyisa CSS leswaku hi ta kota ku yi layicha hi ku kongoma eka dist/index.html, tirhisa mini-css-extract-loaderWebpack plugin.

Xo sungula, nghenisa xiengetelo lexi:

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

Kutani endla xikombiso ivi u tirhisa plugin eka xivumbeko xa 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
           },
           {

Endzhaku ko tirha npm run buildnakambe, ku ta va na fayili leyintshwa dist/main.css, leyi nga ta va na hinkwaswo swa CSS leswi nghenisiweke hi src/js/main.js. Loko u languta dist/index.htmleka browser ya wena sweswi, xitayili xi ta kayivela, tanihi leswi sweswi xi nga xiswona eka dist/main.css. U nga katsa CSS leyi endliweke hi dist/index.htmlndlela leyi:

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

Ku humesa tifayela ta SVG

CSS ya Bootstrap yi katsa swikombo swo tala swa tifayela ta SVG hi ku tirhisa ti data:-URI ta le ndzeni ka layini. Loko u hlamusela Pholisi ya Vuhlayiseki bya Vuxokoxoko bya phurojeke ya wena leyi sivelaka ti data:-URI ta swifaniso, kutani tifayela leti ta SVG a ti nge layicha. U nga rhendzeleka na xiphiqo lexi hi ku humesa tifayela ta SVG ta le ndzeni ka layini hi ku tirhisa xivumbeko xa mimojula ya nhundzu ya Webpack.

Hlela Webpack ku humesa tifayela ta SVG ta le ndzeni ka layini hi ndlela leyi:

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

Endzhaku ko tsutsuma npm run buildnakambe, u ta kuma tifayela ta SVG ti humesiwile eka dist/iconsna ku kongomisiwa kahle eka CSS.

U vona swin’wana leswi hoxeke kumbe leswi hundzeriweke hi nkarhi laha? Hi kombela u pfula mhaka eka GitHub . Xana u lava mpfuno wo lulamisa swiphiqo? Secha kutani u sungula mbulavurisano eka GitHub.