Bootstrap & Webpack

Webpack ulanyp, Bootstrap-yň CSS we JavaScript-i nädip goşmaly we birikdirmelidigi barada resmi gollanma.

Bu sahypada

Ahyryna geçmek isleýärsiňizmi? Bu gollanma üçin deslapky kody we iş demosyny twbs / mysallar ammaryndan göçürip alyň . Göni redaktirlemek üçin mysaly StackBlitz- de açyp bilersiňiz .

Gurmak

“Bootstrap” bilen noldan “Webpack” taslamasyny gurýarys, şonuň üçin hakykatdanam başlamazdan ozal käbir şertler we öňe ädimler bar. Bu gollanma size Node.js gurulmagyny we terminal bilen belli bir tanyşlygy talap edýär.

Taslama bukjasyny dörediň we npm guruň. Papkany dörederis we ähli interaktiw soraglary bermezlik my-projectüçin argument bilen npm başlarys .-y
```
mkdir my-project && cd my-project
npm init -y
```
Web paketini guruň. Ondan soň Webpack ösüşine baglylyklarymyzy gurmalydyrys: webpackWebpack-iň özeni üçin, webpack-cliWebpack buýruklaryny terminaldan webpack-dev-serverişledip bileris we ýerli ösüş serwerini işledip bileris. --save-devBu baglylyklaryň diňe önümçilik üçin däl-de, diňe ösüş üçin ulanylýandygyny görkezmek üçin ulanýarys .
```
npm i --save-dev webpack webpack-cli webpack-dev-server
```
Bootstrap guruň. Indi “Bootstrap” gurup bileris. Şeýle hem, Popper-i gurarys, sebäbi aşak düşýänlerimiz, açýan ýerlerimiz we gurallarymyz olaryň ýerleşişine baglydyr. Şol komponentleri ulanmagy meýilleşdirmeýän bolsaňyz, Popper-i şu ýerde goýup bilersiňiz.
```
npm i --save bootstrap @popperjs/core
```
Goşmaça baglylyklary guruň. Webpack we Bootstrap-dan başga-da, Bootstrap-yň CSS we JS-ni Webpack bilen dogry import etmek we birikdirmek üçin ýene birnäçe garaşlylyk gerek. Bulara Sass, käbir ýükleýjiler we Autoprefixer degişlidir.
```
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
```

Necessaryhli zerur garaşlylyklar gurlansoň, taslama faýllaryny döretmek we Bootstrap import etmek işine başlap bileris.

Taslamanyň gurluşy

Biz eýýäm my-projectbukjany döretdik we npm başladyk. Indi taslamanyň gurluşyny jemlemek üçin bukjalarymyzy srcwe bukjalarymyzy dörederis . distAşakdakylary işlediň my-projectýa-da aşakda görkezilen bukjany we faýl gurluşyny el bilen dörediň.

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

Gutaranyňyzdan soň, doly taslamaňyz şeýle bolmaly:

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

Şu wagt hemme zat dogry ýerde, ýöne Webpack işlemez, sebäbi webpack.config.jsentek doldurmadyk.

Web paketini sazlaň

Baglanyşyklar gurlup, kodlaşdyrmaga başlamagymyz üçin taslama bukjamyz bilen, indi Webpack-y sazlap, taslamamyzy ýerli derejede dolandyryp bileris.

webpack.config.jsRedaktoryňyzda açyň . Boş bolansoň, serwerimizi başlap biler ýaly, oňa birnäçe gazanlar sazlamaly. Sazlamanyň bu bölegi Webpack-a taslamamyzyň JavaScript-i, düzülen kody nireden distçykarmalydygyny we ösüş serweriniň özüni alyp barşyny gözlemelidigini aýdýar ( distbukjadan gyzgyn ýüklemek bilen).
```
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
  }
}
```

Soň bolsa özümizi doldurýarys dist/index.html. Bu, HTML sahypasy Webpack, birikdirilen CSS we JS-ni ulanmak üçin brauzerde ýüklener, indiki ädimlerde goşarys. outputMuny etmezden ozal, JS-ni öňki ädimden goşmak we goşmak üçin bir zat bermeli .

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

Bootstrap-yň CSS-i Webpack tarapyndan haçan ýüklenendigini görmek üçin bu div class="container"ýerde biraz Bootstrap stilini goşýarys.<button>

Indi Webpack-y işletmek üçin npm skript gerek. Aşakda görkezilen skripti açyň package.jsonwe goşuň start(synag skripti eýýäm bolmaly). Bu skripti ýerli Webpack dev serwerimize başlamak üçin ulanarys.
```
{
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Netijede, Webpack-a başlap bileris. Terminalyňyzdaky bukjadan , my-projecttäze goşulan npm skriptini işlediň:
```
npm start
```

Bu gollanmanyň indiki we soňky bölüminde Webpack ýükleýjilerini gurarys we Bootstrap-yň ähli CSS we JavaScript-i import ederis.

Bootstrap import ediň

“Bootstrap” -y Webpack-a import etmek, birinji bölümde gurnan ýükleýjilerimizi talap edýär. Olary npm bilen gurduk, ýöne indi ulanmak üçin Webpack sazlanmaly.

Loadükleýjileri guruň webpack.config.js. Konfigurasiýa faýlyňyz indi gutardy we aşakdaky bölek bilen gabat gelmeli. Bu ýerdäki ýeke-täk modulebölüm bölüm.

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

Ine, bu ýükleýjileriň hemmesine mätäçligimiziň netijesi. CSS-ni HTML sahypasynyň bir elementine style-loadersanjym edýär, ulanmaga kömek edýär we Autoprefixer üçin zerur we Sass -y ulanmaga mümkinçilik berýär.<style><head>css-loader@importurl()postcss-loadersass-loader

Indi, “Bootstrap” -yň CSS-ni import edeliň. src/scss/styles.scssBootstrap-yň ähli çeşmesi Sass-y import etmek üçin aşakdakylary goşuň .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Şeýle hem isleseňiz, stil sahypalarymyzy aýratyn import edip bilersiňiz. Jikme-jiklikler üçin Sass import resminamalarymyzy okaň .
Ondan soň CSS-i ýükleýäris we Bootstrap-yň JavaScript-i import edýäris. src/js/main.jsCSS-ni ýüklemek we Bootstrap-yň ähli JS-lerini import etmek üçin aşakdakylary goşuň . Popper Bootstrap arkaly awtomatiki usulda getiriler.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Şeýle hem, bukjanyň ululygyny peseltmek üçin zerur bolanda JavaScript plaginlerini aýratyn import edip bilersiňiz:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Bootstrap-yň plaginlerini nädip ulanmalydygy barada has giňişleýin maglumat üçin JavaScript resminamalarymyzy okaň .
Sen gutardyň! Bo Bootstrap çeşmesi Sass we JS doly ýüklenensoň, ýerli ösüş serweri indi şeýle bolmaly.

Indi ulanmak isleýän islendik Bootstrap komponentleriňizi goşup bilersiňiz. Goşmaça adaty Sass-y nädip goşmalydygyny we diňe Bootstrap-yň CSS we JS-iň zerur böleklerini import edip, binany optimizirlemek üçin doly Webpack mysal taslamasyny gözden geçiriň .

Önümçiligiň optimizasiýasy

Gurluşyňyza baglylykda, taslamany önümçilikde işletmek üçin peýdaly goşmaça howpsuzlyk we tizligi optimizasiýa etmek isläp bilersiňiz. Bu optimizasiýalaryň Webpack mysal taslamasynda ulanylmaýandygyny we durmuşa geçirmegiň size baglydygyny unutmaň.

CSS çykarmak

Aboveokarda düzenimiz , style-loaderCSS faýly el bilen ýüklemegiň dist/index.htmlzerurlygy bolmazlygy üçin amatly CSS-i bukja çykarýar. Bu çemeleşme, berk Mazmun Howpsuzlygy Syýasaty bilen işlemän biler, emma bukjanyň ululygy sebäpli programmaňyzda päsgelçilik bolup biler.

CSS-ni gönüden-göni ýükläp biler ýaly dist/index.html, mini-css-extract-loaderWebpack pluginini ulanyň.

Ilki bilen plugini guruň:

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

Soňra Webpack konfigurasiýasyndaky plagini derrew ulanyň we ulanyň:

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

Againene-de işledilenden soň , import edilen CSS-leriň hemmesini öz içine alýan npm run buildtäze faýl bolar . Häzir brauzeriňizde görseňiz , stil häzirki ýaly ýok bolar . Döredilen CSS-i şuňa goşup bilersiňiz:dist/main.csssrc/js/main.jsdist/index.htmldist/main.cssdist/index.html

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

SVG faýllaryny çykarmak

data:“Bootstrap” -yň CSS-i içerki URI -ler arkaly SVG faýllaryna birnäçe salgylanmany öz içine alýar . Suratlar üçin URI-leri bloklaýan taslamaňyz üçin Mazmun howpsuzlygy syýasatyny kesgitlän bolsaňyz data:, bu SVG faýllary ýüklenmez. Webpack-iň aktiw modullary aýratynlygyny ulanyp, içerki SVG faýllaryny çykaryp, bu meseläni çözüp bilersiňiz.

Şuňa meňzeş SVG faýllaryny çykarmak üçin Webpack-y sazlaň:

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

Againene-de işledeniňizden soň , CSS-den çykarylan we dogry salgylanylýan npm run buildSVG faýllaryny taparsyňyz .dist/icons

Bu ýerde nädogry ýa-da köne bir zady görüň? GitHub-da bir mesele açmagyňyzy haýyş edýäris . Näsazlyklary düzetmek üçin kömek gerekmi? GitHub -da gözläň ýa-da çekişmä başlaň .