Bootstrap & Webpack

Bootstrap نىڭ CSS ۋە JavaScript نى Webpack ئارقىلىق تۈرىڭىزگە قانداق كىرگۈزۈش ۋە باغلاشنىڭ رەسمىي قوللانمىسى.

بۇ بەتتە

ئاخىرىغا ئاتلىنىشنى خالامسىز؟ Twbs / مىساللار ئامبىرىدىن بۇ قوللانمىنىڭ ئەسلى كودى ۋە خىزمەت كۆرسەتمىسىنى چۈشۈرۈڭ . نەق مەيدان تەھرىرلەش ئۈچۈن StackBlitz دا مىسالنى ئاچسىڭىز بولىدۇ .

تەڭشەش

بىز Bootstrap بىلەن باشتىن-ئاخىر Webpack تۈرىنى ياساۋاتىمىز ، شۇڭا ھەقىقىي باشلاشتىن بۇرۇن بەزى ئالدىنقى شەرتلەر ۋە ئالدىنقى باسقۇچلار بار. بۇ قوللانما سىزدىن Node.js نى ئورنىتىشىڭىزنى ۋە تېرمىنالغا پىششىق بولۇشىڭىزنى تەلەپ قىلىدۇ.

تۈر ھۆججەت قىسقۇچى قۇرۇپ ، npm نى تەڭشەڭ. بىز بۇ بارلىق ھۆججەتلەرنى سوراشتىن ساقلىنىش ئۈچۈن my-projectھۆججەت قىسقۇچنى قۇرۇپ ، تالاش-تارتىش بىلەن npm نى باشلايمىز .-y
```
mkdir my-project && cd my-project
npm init -y
```
Webpack نى قاچىلاڭ. كېيىنكى قەدەمدە بىز Webpack ئېچىش تايىنىشچانلىقىمىزنى ئورنىتىشىمىز كېرەك: webpackWebpack نىڭ يادروسى ئۈچۈن ، webpack-cliبىز تېرمىنالدىن Webpack بۇيرۇقلىرىنى ئىجرا قىلالايمىز ، webpack-dev-serverشۇڭا يەرلىك تەرەققىيات مۇلازىمېتىرىنى ئىجرا قىلالايمىز. بىز --save-devبۇ بېقىنىشلارنىڭ پەقەت تەرەققىيات ئۈچۈنلا ئىشلىتىلىدىغانلىقى ، ئىشلەپچىقىرىش ئۈچۈن ئەمەسلىكىنى سىگنال بېرىمىز.
```
npm i --save-dev webpack webpack-cli webpack-dev-server
```
Bootstrap نى قاچىلاڭ. ھازىر Bootstrap نى قاچىلىيالايمىز. تۆۋەنلەش ، سەكرەش ۋە قورال قوراللىرىمىزنىڭ ئورنى ئۇلارنىڭ ئوخشىماسلىقىغا باغلىق بولغاچقا ، Popper نىمۇ ئورنىتىمىز. ئەگەر بۇ زاپچاسلارنى ئىشلىتىشنى پىلانلىمىسىڭىز ، Popper نى بۇ يەردىن تاشلىۋەتسىڭىز بولىدۇ.
```
npm i --save bootstrap @popperjs/core
```
قوشۇمچە بېقىنىشلارنى ئورنىتىڭ. Webpack ۋە Bootstrap دىن باشقا ، Bootstrap نىڭ CSS ۋە JS نى Webpack بىلەن توغرا ئەكىرىش ۋە باغلاش ئۈچۈن يەنە بىر قانچە بېقىنىشچانلىقىمىز لازىم. بۇلار Sass ، بىر قىسىم يۈكلىگۈچىلەر ۋە Autoprefixer قاتارلىقلارنى ئۆز ئىچىگە ئالىدۇ.
```
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
```

ھازىر بارلىق زۆرۈر تايىنىشچانلىقىمىز ئورنىتىلغان بولغاچقا ، تۈر ھۆججىتى قۇرۇش ۋە Bootstrap ئەكىرىش خىزمىتىگە ئېرىشەلەيمىز.

تۈر قۇرۇلمىسى

بىز بۇ my-projectھۆججەت قىسقۇچنى قۇردۇق ۋە npm نى باشلىدۇق. ھازىر بىز يەنە قۇرۇلمىمىزنى چۆرىدىگەن ھالدا ھۆججەت قىسقۇچلىرىمىزنى srcقۇرۇپ چىقىمىز. distتۆۋەندىكىلەرنى ئىجرا قىلىڭ my-projectياكى تۆۋەندە كۆرسىتىلگەن ھۆججەت قىسقۇچ ۋە ھۆججەت قۇرۇلمىسىنى قولدا قۇرۇڭ.

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

ئىش تاماملانغاندىن كېيىن ، تولۇق تۈرىڭىز مۇنداق بولۇشى كېرەك:

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

بۇ ۋاقىتتا ھەممە نەرسە دەل جايىدا ، ئەمما Webpack ئىشلىمەيدۇ ، چۈنكى بىز تېخى تولدۇرمىدۇق webpack.config.js.

تور بەتنى سەپلەڭ

تايىنىشچانلىقى ئورنىتىلغان ۋە بىزنىڭ ھۆججەت قىسقۇچ بىزنىڭ كودلاشنى باشلىشىمىزغا تەييار بولغاچقا ، بىز ھازىر Webpack نى سەپلەپ ، تۈرىمىزنى يەرلىكتە ئىجرا قىلالايمىز.

webpack.config.jsتەھرىرىڭىزنى ئېچىڭ . ئۇ قۇرۇق بولغاچقا ، ئۇنىڭغا بىر قىسىم پار قازان سەپلىمىسى قوشۇشىمىز كېرەك ، شۇنداق بولغاندا مۇلازىمىتىرىمىزنى قوزغىتالايمىز. سەپلىمىنىڭ بۇ قىسمى Webpack غا تۈرىمىزنىڭ JavaScript نى ئىزدەپ تېپىپ ، تۈزۈلگەن كودنى ( dist) گە نەدىن چىقىرىشنى ، ۋە ئېچىش مۇلازىمېتىرىنىڭ قانداق ھەرىكەت قىلىش كېرەكلىكىنى ( distقىسقۇچتىن ئىسسىق قايتا قاچىلاش ئارقىلىق تارتىپ چىقىرىش) نى كۆرسىتىدۇ.
```
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
  }
}
```
كېيىنكى قەدەمدە ئۆزىمىزنى تولدۇرىمىز dist/index.html. بۇ HTML بېتى Webpack توركۆرگۈگە قاچىلانغان باغلانغان CSS ۋە JS نى كېيىنكى باسقۇچلاردا قوشىمىز. بۇنى قىلىشتىن بۇرۇن ، بىز ئۇنىڭغا بىر نەرسە بېرىشىمىز ۋە outputئالدىنقى باسقۇچتىكى JS نى ئۆز ئىچىگە ئېلىشىمىز كېرەك.
```
<!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 ئۇسلۇبىنى ئۆز ئىچىگە ئالغان بولۇپ div class="container"، <button>Bootstrap نىڭ CSS نى Webpack قا قاچان قاچىلىغانلىقىنى كۆرىمىز.
ھازىر Webpack نى ئىجرا قىلىش ئۈچۈن npm قوليازمىسى لازىم. تۆۋەندە كۆرسىتىلگەن قوليازمىنى ئېچىڭ package.jsonۋە قوشۇڭ start(سىزدە سىناق قوليازمىسى بولۇشى كېرەك). بىز بۇ قوليازمىنى ئىشلىتىپ يەرلىك Webpack dev مۇلازىمېتىرىمىزنى باشلايمىز.
```
{
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
ئاخىرىدا ، بىز Webpack نى قوزغىتالايمىز. تېرمىنالىڭىزدىكى my-projectھۆججەت قىسقۇچتىن يېڭىدىن قوشۇلغان npm قوليازمىسىنى ئىجرا قىلىڭ:
```
npm start
```

بۇ قوللانمىنىڭ كېيىنكى ۋە ئاخىرقى بۆلىكىدە بىز Webpack يۈكلىگۈچىلەرنى قۇرۇپ ، Bootstrap نىڭ CSS ۋە JavaScript نىڭ ھەممىسىنى ئىمپورت قىلىمىز.

Bootstrap نى ئەكىرىڭ

Bootstrap نى Webpack غا ئەكىرىش بىز بىرىنچى بۆلەككە قاچىلىغان يۈكلىگۈچنى تەلەپ قىلىدۇ. بىز ئۇلارنى npm بىلەن قاچىلىدۇق ، ئەمما ھازىر Webpack نى ئىشلىتىش ئۈچۈن تەڭشەش كېرەك.

يۈكلىگۈچىلەرنى تەڭشەڭ webpack.config.js. سەپلىمە ھۆججىتىڭىز ھازىر تولۇق بولۇپ ، تۆۋەندىكى ئۈزۈندىگە ماس كېلىشى كېرەك. بۇ يەردىكى بىردىنبىر يېڭى moduleبۆلەك.

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

بۇ نېمە ئۈچۈن بىزنىڭ بۇ يۈكلىگۈچىلەرگە ئېھتىياجلىق ئىكەنلىكىمىزنى ئەسلەپ ئۆتەيلى. CSS نى HTML بېتىنىڭ ئېلېمېنتىغا style-loaderئوكۇل قىلىدۇ ، ئىشلىتىشكە ياردەم بېرىدۇ ۋە Autoprefixer ئۈچۈن تەلەپ قىلىنىدۇ ، ھەمدە بىزنىڭ Sass نى ئىشلىتىشىمىزگە يول قويىدۇ.<style><head>css-loader@importurl()postcss-loadersass-loader

ئەمدى Bootstrap نىڭ CSS نى ئەكىرىمىز. src/scss/styles.scssBootstrap نىڭ بارلىق مەنبە Sass نى ئەكىرىش ئۈچۈن تۆۋەندىكىلەرنى قوشۇڭ .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
ئەگەر خالىسىڭىز ئۇسلۇب جەدۋىلىمىزنى ئايرىم ئەكىرىسىز. تەپسىلاتىنى Sass ئىمپورت ھۆججەتلىرىمىزنى ئوقۇڭ .
كېيىنكى قەدەمدە بىز CSS نى يۈكلەپ Bootstrap نىڭ JavaScript نى ئەكىرىمىز. تۆۋەندىكىلەرنى قوشۇپ src/js/main.jsCSS نى يۈكلەڭ ۋە Bootstrap نىڭ بارلىق JS نى ئەكىرىڭ. Popper Bootstrap ئارقىلىق ئاپتوماتىك ئىمپورتلىنىدۇ.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
باغلىنىشنىڭ چوڭ-كىچىكلىكىنى ساقلاش ئۈچۈن ئېھتىياجغا ئاساسەن JavaScript قىستۇرمىلىرىنى ئايرىم ئەكىرىسىز:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Bootstrap نىڭ قىستۇرمىلىرىنى قانداق ئىشلىتىش ھەققىدە تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن JavaScript ھۆججىتىمىزنى ئوقۇڭ .
ئىش تامام! Bo Bootstrap نىڭ مەنبەسى Sass ۋە JS تولۇق قاچىلانغان بولغاچقا ، يەرلىك تەرەققىيات مۇلازىمېتىرىڭىز مۇشۇنىڭغا ئوخشايدۇ.

ھازىر سىز ئىشلەتمەكچى بولغان Bootstrap زاپچاسلىرىنى قوشالايسىز. قوشۇمچە خاسلاشتۇرۇلغان Sass نى قانداق ئۆز ئىچىگە ئالىدىغانلىقى ۋە پەقەت Bootstrap نىڭ CSS ۋە JS نىڭ ئېھتىياجلىق بولغان زاپچاسلىرىنىلا ئەكىرىش ئارقىلىق قۇرۇلۇشنى ئەلالاشتۇرۇش ئۈچۈن تولۇق Webpack ئۈلگە تۈرىنى تەكشۈرۈپ بېقىڭ .

ئىشلەپچىقىرىشنى ئەلالاشتۇرۇش

ئورۇنلاشتۇرۇشىڭىزغا ئاساسەن ، سىز بۇ تۈرنى ئىشلەپچىقىرىشتا ئىشلىتىشكە پايدىلىق بولغان قوشۇمچە بىخەتەرلىك ۋە سۈرئەتنى ئەلالاشتۇرۇشنى يولغا قويسىڭىز بولىدۇ. شۇنىڭغا دىققەت قىلىڭكى ، بۇ ئەلالاشتۇرۇشلار Webpack ئۈلگە تۈرىدە قوللىنىلمايدۇ ، ئۇنى يولغا قويسىڭىز بولىدۇ.

CSS نى چىقىرىش

بىز يۇقىرىدا تەڭشەلگەن CSS ھۆججىتىنى قولدا قاچىلاشنىڭ ھاجىتى يوق style-loaderبولغاچقا ، قۇلايلىق ھالدا CSS نى باغلانما قويۇپ بېرىدۇ . dist/index.htmlبۇ ئۇسۇل بەلكىم قاتتىق مەزمۇن بىخەتەرلىك سىياسىتى بىلەن ئىشلىمەسلىكى مۇمكىن ، ئەمما ، باغلانما چوڭلۇقى سەۋەبىدىن ئۇ سىزنىڭ ئىلتىماسىڭىزدىكى توسالغۇغا ئايلىنىپ قېلىشى مۇمكىن.

CSS نى بىۋاسىتە يۈكلىيەلەيدىغان قىلىپ ئايرىش ئۈچۈن ، Webpack قىستۇرمىسىنى dist/index.htmlئىشلىتىڭ .mini-css-extract-loader

ئالدى بىلەن قىستۇرمىنى قاچىلاڭ:

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

ئاندىن دەرھال 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
           },
           {

قايتا ئىجرا بولغاندىن كېيىن npm run build، يېڭى ھۆججەت dist/main.cssچىقىدۇ ، بۇ ھۆججەتلەر ئىمپورت قىلغان CSS نىڭ ھەممىسىنى ئۆز ئىچىگە ئالىدۇ src/js/main.js. ئەگەر dist/index.htmlھازىر تور كۆرگۈچىڭىزدە كۆرسىڭىز ، ئۇسلۇب ھازىرقىدەك يوقاپ كېتىدۇ dist/main.css. ھاسىل قىلىنغان CSS نى تۆۋەندىكىدەك ئۆز ئىچىگە ئالالايسىز dist/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 ھۆججىتىنى چىقىرىش

Bootstrap نىڭ CSS ئىچكى قىسمىدىكى data:URI ئارقىلىق SVG ھۆججىتىگە كۆپ پايدىلىنىشنى ئۆز ئىچىگە ئالىدۇ. ئەگەر سىز تۈرىڭىزنىڭ data:رەسىم ئۈچۈن URI لارنى توسىدىغان مەزمۇن بىخەتەرلىك سىياسىتىگە ئېنىقلىما بەرسىڭىز ، ئۇنداقتا بۇ SVG ھۆججەتلىرى يۈكلەنمەيدۇ. Webpack نىڭ مۈلۈك مودۇلى ئىقتىدارى ئارقىلىق ئىچكى SVG ھۆججىتىنى چىقىرىش ئارقىلىق بۇ مەسىلىنى ھەل قىلالايسىز.

Webpack نى سەپلەپ ، تۆۋەندىكى SVG ھۆججىتىنى چىقىرىڭ:

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

قايتا ئىجرا بولغاندىن كېيىن ، SVS ھۆججىتىنىڭ CSS دىن npm run buildئېلىنغان ۋە مۇۋاپىق پايدىلانغانلىقىنى بايقايسىز .dist/icons

بۇ يەردە خاتا ياكى ۋاقتى ئۆتكەن نەرسىلەرنى كۆرۈڭ؟ GitHub دا مەسىلە ئېچىڭ . مەسىلىلەرنى ھەل قىلىشقا ياردەم كېرەكمۇ؟ GitHub دىن ئىزدەڭ ياكى مۇنازىرە قىلىڭ.