Kalo te përmbajtja kryesore Kalo te navigimi i dokumenteve
Check
in English

Bootstrap & Webpack

Udhëzuesi zyrtar për mënyrën e përfshirjes dhe bashkimit të CSS dhe JavaScript të Bootstrap në projektin tuaj duke përdorur Webpack.

Në këtë faqe
Dëshironi të kaloni deri në fund? Shkarkoni kodin burimor dhe demonstrimin e punës për këtë udhëzues nga depoja e twbs/shembujve . Ju gjithashtu mund ta hapni shembullin në StackBlitz për redaktim të drejtpërdrejtë.

Konfigurimi

Ne po ndërtojmë një projekt Webpack me Bootstrap nga e para, kështu që ka disa parakushte dhe hapa të parë përpara se të mund të fillojmë vërtet. Ky udhëzues kërkon që ju të keni të instaluar Node.js dhe njëfarë njohjeje me terminalin.

  1. Krijoni një dosje projekti dhe konfiguroni npm. Ne do të krijojmë my-projectdosjen dhe do të inicializojmë npm me -yargumentin për të shmangur që ai të na bëjë të gjitha pyetjet ndërvepruese.

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

  2. Instaloni Webpack. Më pas, ne duhet të instalojmë varësitë tona të zhvillimit të Webpack: webpackpër thelbin e Webpack, webpack-cliqë të mund të ekzekutojmë komandat e Webpack nga terminali dhe webpack-dev-serverkështu të mund të ekzekutojmë një server lokal zhvillimi. Ne përdorim --save-devpër të sinjalizuar se këto varësi janë vetëm për përdorim zhvillimor dhe jo për prodhim.

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

  3. Instaloni Bootstrap. Tani mund të instalojmë Bootstrap. Ne do të instalojmë gjithashtu Popper meqenëse pikat tona të lëshimit, popover-et dhe këshillat e veglave varen prej tij për pozicionimin e tyre. Nëse nuk planifikoni t'i përdorni ato komponentë, mund ta hiqni Popper këtu.

    npm i --save bootstrap @popperjs/core

  4. Instaloni varësi shtesë. Përveç Webpack dhe Bootstrap, ne kemi nevojë për disa varësi të tjera për të importuar dhe bashkuar siç duhet CSS dhe JS të Bootstrap me Webpack. Këto përfshijnë Sass, disa ngarkues dhe Autoprefixer.

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

Tani që kemi të gjitha varësitë e nevojshme të instaluara, mund të fillojmë punën për krijimin e skedarëve të projektit dhe importimin e Bootstrap.

Struktura e projektit

Ne kemi krijuar tashmë my-projectdosjen dhe kemi inicializuar npm. Tani do të krijojmë gjithashtu dosjet tona srcdhe distpër të përmbyllur strukturën e projektit. Ekzekutoni sa vijon nga my-project, ose krijoni manualisht strukturën e dosjes dhe skedarit të treguar më poshtë.

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

Kur të keni mbaruar, projekti juaj i plotë duhet të duket kështu:

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

Në këtë pikë, gjithçka është në vendin e duhur, por Webpack nuk do të funksionojë sepse ne nuk e kemi plotësuar webpack.config.jsende.

Konfiguro paketën e uebit

Me varësitë e instaluara dhe dosjen tonë të projektit gati që ne të fillojmë kodimin, tani mund të konfigurojmë paketën e uebit dhe ta ekzekutojmë projektin tonë në nivel lokal.

  1. Hapeni webpack.config.jsnë redaktorin tuaj. Meqenëse është bosh, do të na duhet të shtojmë disa konfigurime të pllakës së bojlerit në të që të mund të nisim serverin tonë. Kjo pjesë e konfigurimit tregon se Webpack duhej të kërkonte JavaScript-in e projektit tonë, ku të nxirrte kodin e përpiluar në ( dist), dhe si duhet të sillet serveri i zhvillimit (duke tërhequr nga distdosja me rifreskimin e nxehtë).

    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. Më pas plotësojmë tonën dist/index.html. Kjo është faqja HTML Webpack që do të ngarkojë në shfletues për të përdorur CSS dhe JS të bashkuara që do t'i shtojmë në hapat e mëvonshëm. Përpara se ta bëjmë këtë, duhet t'i japim diçka për të dhënë dhe të përfshijmë outputJS nga hapi i mëparshëm.

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

    Ne po përfshijmë këtu një stil të vogël Bootstrap me div class="container"dhe në <button>mënyrë që të shohim kur CSS e Bootstrap ngarkohet nga Webpack.

  3. Tani na duhet një skript npm për të ekzekutuar Webpack. Hapni package.jsondhe shtoni startskriptin e treguar më poshtë (duhet ta keni tashmë skriptin e testimit). Ne do ta përdorim këtë skript për të nisur serverin tonë lokal të zhvillimit të Webpack.

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

  4. Dhe së fundi, ne mund të fillojmë Webpack. Nga my-projectdosja në terminalin tuaj, ekzekutoni skriptin e sapo shtuar npm:

    npm start
    Serveri i devijimit në uebpack po funksionon

Në seksionin tjetër dhe të fundit të këtij udhëzuesi, ne do të konfigurojmë ngarkuesit e Uebpack dhe do të importojmë të gjithë CSS dhe JavaScript të Bootstrap.

Importo Bootstrap

Importimi i Bootstrap në Webpack kërkon ngarkuesit që kemi instaluar në seksionin e parë. Ne i kemi instaluar ato me npm, por tani Webpack duhet të konfigurohet për t'i përdorur ato.

  1. Vendosni ngarkuesit në webpack.config.js. Skedari juaj i konfigurimit tani është i plotë dhe duhet të përputhet me fragmentin më poshtë. E vetmja pjesë e re këtu është moduleseksioni.

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

    Këtu është një përmbledhje se pse na duhen të gjithë këta ngarkues. style-loaderinjekton CSS në një <style>element në <head>faqen HTML, css-loaderndihmon me përdorimin @importdhe url(), postcss-loaderkërkohet për Autoprefiksuesin dhe sass-loaderna lejon të përdorim Sass.

  2. Tani, le të importojmë CSS të Bootstrap. Shtoni sa vijon për src/scss/styles.scsstë importuar të gjithë burimin Sass të Bootstrap.

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

    Ju gjithashtu mund të importoni fletët tona të stilit individualisht nëse dëshironi. Lexoni dokumentet tona të importit të Sass për detaje.

  3. Më pas ngarkojmë CSS dhe importojmë JavaScript-in e Bootstrap. Shtoni sa vijon në src/js/main.jspër të ngarkuar CSS dhe për të importuar të gjithë JS të Bootstrap. Popper do të importohet automatikisht përmes Bootstrap.

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

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

    Ju gjithashtu mund të importoni shtojcat JavaScript individualisht sipas nevojës për të mbajtur madhësitë e paketave të ulëta:

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

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

    Lexoni dokumentet tona JavaScript për më shumë informacion se si të përdorni shtojcat e Bootstrap.

  4. Dhe ju keni mbaruar! 🎉 Me burimin Sass dhe JS të Bootstrap të ngarkuar plotësisht, serveri juaj lokal i zhvillimit tani duhet të duket kështu.

    Serveri i devijimit në Webpack që funksionon me Bootstrap

    Tani mund të filloni të shtoni çdo komponent Bootstrap që dëshironi të përdorni. Sigurohuni që të shikoni projektin e plotë të shembullit të Webpack se si të përfshini Sass shtesë të personalizuar dhe të optimizoni ndërtimin tuaj duke importuar vetëm pjesët e CSS dhe JS të Bootstrap që ju nevojiten.

Optimizimi i prodhimit

Në varësi të konfigurimit tuaj, mund të dëshironi të zbatoni disa optimizime shtesë të sigurisë dhe shpejtësisë të dobishme për ekzekutimin e projektit në prodhim. Vini re se këto optimizime nuk aplikohen në projektin e shembullit të Webpack dhe janë në dorën tuaj për t'i zbatuar.

Ekstraktimi i CSS

Skedari style-loaderqë konfiguruam më lart emeton me lehtësi CSS në paketë, në mënyrë që ngarkimi manual i një skedari CSS të dist/index.htmlmos jetë i nevojshëm. Kjo qasje mund të mos funksionojë me një politikë strikte të sigurisë së përmbajtjes, megjithatë, dhe mund të bëhet një pengesë në aplikacionin tuaj për shkak të madhësisë së madhe të paketës.

Për të ndarë CSS në mënyrë që ta ngarkojmë drejtpërdrejt nga dist/index.html, përdorni mini-css-extract-loadershtojcën Webpack.

Së pari, instaloni shtojcën:

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

Pastaj instantohuni dhe përdorni shtojcën në konfigurimin e paketës së uebit:

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

Pas ekzekutimit npm run buildpërsëri, do të ketë një skedar të ri dist/main.css, i cili do të përmbajë të gjithë CSS-në e importuar nga src/js/main.js. Nëse shikoni dist/index.htmlnë shfletuesin tuaj tani, stili do të mungojë, siç është tani në dist/main.css. Ju mund të përfshini CSS-në e krijuar dist/index.htmlsi kjo:

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

Ekstraktimi i skedarëve SVG

Bootstrap’s CSS includes multiple references to SVG files via inline data: URIs. If you define a Content Security Policy for your project that blocks data: URIs for images, then these SVG files will not load. You can get around this problem by extracting the inline SVG files using Webpack’s asset modules feature.

Configure Webpack to extract inline SVG files like this:

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

After running npm run build again, you’ll find the SVG files extracted into dist/icons and properly referenced from CSS.

See something wrong or out of date here? Please open an issue on GitHub. Need help troubleshooting? Search or start a discussion on GitHub.