Bootstrap & Webpack

Chitsogozo chovomerezeka chamomwe mungaphatikizire ndikumanga mtolo wa Bootstrap's CSS ndi JavaScript mu polojekiti yanu pogwiritsa ntchito Webpack.

Patsamba ili

Mukufuna kulumpha mpaka kumapeto? Tsitsani kachidindo kochokera ndi chiwonetsero chogwirira ntchito cha bukhuli kuchokera pankhokwe ya twbs/examples . Mutha kutsegulanso chitsanzo mu StackBlitz kuti musinthe pompopompo.

Khazikitsa

Tikupanga pulojekiti ya Webpack ndi Bootstrap kuyambira poyambira, ndiye pali zofunika zina ndi masitepe akutsogolo tisanayambe. Bukuli likufuna kuti muyike Node.js komanso kudziwa zambiri za terminal.

Pangani chikwatu cha polojekiti ndikukhazikitsa npm. Tipanga my-projectchikwatu ndikuyambitsa npm ndi -ymkangano kuti tipewe kutifunsa mafunso onse okhudzana.
```
mkdir my-project && cd my-project
npm init -y
```
Ikani Webpack. Kenako tiyenera kukhazikitsa kudalira kwathu kwa Webpack: webpackpachimake cha Webpack, webpack-clikuti titha kuyendetsa malamulo a Webpack kuchokera ku terminal, webpack-dev-serverkuti titha kuyendetsa seva yakukulitsa kwanuko. Timagwiritsa ntchito --save-devkuwonetsa kuti zodalira izi ndizongogwiritsa ntchito chitukuko osati kupanga.
```
npm i --save-dev webpack webpack-cli webpack-dev-server
```
Ikani Bootstrap. Tsopano titha kukhazikitsa Bootstrap. Tikhazikitsanso Popper popeza zotsikira, popovers, ndi zida zothandizira zimatengera momwe zilili. Ngati simukukonzekera kugwiritsa ntchito zigawozi, mutha kusiya Popper apa.
```
npm i --save bootstrap @popperjs/core
```
Ikani zina zodalira. Kuphatikiza pa Webpack ndi Bootstrap, tifunikanso kudalira pang'ono kuti tilowetse bwino ndikumanga CSS ya Bootstrap ndi JS yokhala ndi Webpack. Izi zikuphatikiza Sass, zonyamula zina, ndi Autoprefixer.
```
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
```

Tsopano popeza tili ndi zodalira zonse zofunika, titha kugwira ntchito yopanga mafayilo a polojekiti ndikulowetsa Bootstrap.

Kapangidwe ka polojekiti

Tapanga kale my-projectchikwatu ndikuyambitsa npm. Tsopano tipanganso zathu srcndi distzikwatu kuti tikwaniritse dongosolo la polojekiti. Yendetsani zotsatirazi kuchokera ku my-project, kapena pangani pamanja chikwatu ndi mawonekedwe a fayilo omwe akuwonetsedwa pansipa.

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

Mukamaliza, polojekiti yanu yonse iyenera kuwoneka motere:

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

Pakadali pano, chilichonse chili pamalo oyenera, koma Webpack sigwira ntchito chifukwa sitinadzazebe zathu webpack.config.js.

Konzani Webpack

Ndi zodalira zomwe zayikidwa ndi foda yathu ya projekiti yokonzeka kuti tiyambe kukopera, tsopano titha kukonza Webpack ndikuyendetsa polojekiti yathu kwanuko.

Tsegulani webpack.config.jsmkonzi wanu. Popeza ilibe kanthu, tifunika kuwonjezera ma boilerplate config kuti tithe kuyambitsa seva yathu. Gawo ili la kasinthidwe limauza Webpack kuti ayang'ane JavaScript ya projekiti yathu, komwe angatulutsire kachidindo kophatikizidwa ku ( dist), ndi momwe seva yachitukuko iyenera kuchitira (kukoka distchikwatu ndikuyikanso kotentha).
```
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
  }
}
```

Kenako timadzaza dist/index.html. Ili ndiye tsamba la HTML la Webpack lomwe lidzalowe mu msakatuli kuti mugwiritse ntchito CSS yolumikizidwa ndipo JS tidzayiwonjezera pambuyo pake. Tisanachite izi, tiyenera kupereka china chake kuti tipereke ndikuphatikiza outputJS kuchokera pagawo lapitalo.

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

Tikuphatikiza masitayelo pang'ono a Bootstrap apa ndi div class="container"komanso <button>kuti tiwone pomwe Bootstrap's CSS imadzazidwa ndi Webpack.

Tsopano tikufunika npm script kuti tigwiritse ntchito Webpack. Tsegulani package.jsonndikuwonjezera startzolemba zomwe zili pansipa (muyenera kukhala ndi zolemba zoyeserera). Tigwiritsa ntchito script iyi kuyambitsa seva yathu yapa Webpack dev.
```
{
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Ndipo pomaliza, titha kuyambitsa Webpack. Kuchokera pa my-projectchikwatu chomwe chili mu terminal yanu, yendetsani npm script yatsopanoyo:
```
npm start
```

Mu gawo lotsatira komanso lomaliza la bukhuli, tikhazikitsa zojambulira pa Webpack ndikulowetsa zonse za Bootstrap CSS ndi JavaScript.

Lowetsani Bootstrap

Kulowetsa Bootstrap mu Webpack kumafuna zotengera zomwe taziyika mgawo loyamba. Taziyika ndi npm, koma tsopano Webpack iyenera kukonzedwa kuti igwiritse ntchito.

Konzani ma loaders mu webpack.config.js. Fayilo yanu yosinthira tsopano yatha ndipo iyenera kufanana ndi mawu omwe ali pansipa. Gawo latsopanoli pano ndi modulegawo.

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

Nachi chidule cha chifukwa chake timafunikira zonyamula zonsezi. style-loaderimalowetsa CSS mu <style>chinthu <head>patsamba la HTML, css-loaderimathandizira kugwiritsa ntchito @importndi url(), postcss-loaderimafunikira Autoprefixer, ndipo sass-loaderimatilola kugwiritsa ntchito Sass.

Tsopano, tiyeni tilowetse CSS ya Bootstrap. Onjezani zotsatirazi kuti src/scss/styles.scssmulowetse Sass yonse ya Bootstrap.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Mutha kuitanitsanso masitayelo athu payekhapayekha ngati mukufuna. Werengani zolemba zathu za Sass kuti mumve zambiri.
Kenako timayika CSS ndikulowetsa JavaScript ya Bootstrap. Onjezani zotsatirazi kuti src/js/main.jsmukweze CSS ndikulowetsa zonse za Bootstrap's JS. Popper idzatumizidwa kunja kudzera mu Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Mutha kulowetsanso mapulagini a JavaScript payekhapayekha ngati pakufunika kuti mitolo ikhale pansi:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Werengani zolemba zathu za JavaScript kuti mudziwe zambiri zamomwe mungagwiritsire ntchito mapulagini a Bootstrap.
Ndipo mwatha! 🎉 Ndi gwero la Bootstrap la Sass ndi JS litadzaza, seva yanu yachitukuko yakumaloko iyenera kuwoneka chonchi.

Tsopano mutha kuyamba kuwonjezera zida zilizonse za Bootstrap zomwe mukufuna kugwiritsa ntchito. Onetsetsani kuti mwawona pulojekiti yathunthu yachitsanzo ya Webpack yamomwe mungaphatikizire ma Sass ena owonjezera ndikuwongolera kapangidwe kanu potumiza magawo a Bootstrap a CSS ndi JS okha omwe mukufuna.

Kukhathamiritsa kwa kupanga

Kutengera kukhazikitsidwa kwanu, mungafune kukhazikitsa zina zowonjezera chitetezo ndi kukhathamiritsa kwachangu komwe kuli kothandiza poyendetsa polojekitiyo. Dziwani kuti kukhathamiritsa uku sikukugwiritsidwa ntchito pa projekiti ya Webpack ndipo zili ndi inu kuti mugwiritse ntchito.

Kuchotsa CSS

Zomwe style-loadertazikonza pamwambapa zimatulutsa CSS mumtolo kuti kutsitsa pamanja fayilo ya CSS dist/index.htmlsikofunikira. Njirayi mwina siyingagwire ntchito ndi Ndondomeko Yachitetezo Chokhazikika, komabe, ndipo itha kukhala cholepheretsa kugwiritsa ntchito kwanu chifukwa cha kukula kwake.

Kuti mulekanitse CSS kuti titha kuyiyika mwachindunji kuchokera ku dist/index.html, gwiritsani ntchito pulogalamu yowonjezera ya mini-css-extract-loaderWebpack.

Choyamba, yikani pulogalamu yowonjezera:

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

Kenako yambitsani ndikugwiritsa ntchito pulogalamu yowonjezera mu kasinthidwe ka 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
           },
           {

Pambuyo kuthamanga npm run buildkachiwiri, padzakhala latsopano wapamwamba dist/main.css, amene adzakhala onse CSS kunja ndi src/js/main.js. Ngati muwona dist/index.htmlmumsakatuli wanu tsopano, sitayeloyo isowa, monga momwe ilili mu dist/main.css. Mutha kuphatikiza CSS yopangidwa dist/index.htmlmotere:

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

Kuchotsa mafayilo a SVG

CSS ya Bootstrap imaphatikizapo maumboni angapo a mafayilo a SVG kudzera mu data:URIs. Ngati mutanthauzira Content Security Policy ya pulojekiti yanu yomwe imatsekereza data:ma URI pazithunzi, ndiye kuti mafayilo a SVG sangalowe. Mutha kuthana ndi vutoli pochotsa mafayilo amkati a SVG pogwiritsa ntchito ma module a Webpack.

Konzani Webpack kuti muchotse mafayilo amkati a SVG monga chonchi:

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

Mukayambiranso npm run build, mupeza mafayilo a SVG atachotsedwa dist/iconsndikutchulidwa bwino kuchokera ku CSS.

Mukuwona cholakwika kapena chachikale apa? Chonde tsegulani vuto pa GitHub . Mukufuna thandizo lazovuta? Sakani kapena yambitsani zokambirana pa GitHub.