Үндсэн агуулга руу шилжих Docs навигаци руу алгасах
Check
in English

Bootstrap & Webpack

Webpack ашиглан Bootstrap-ийн CSS болон JavaScript-г төсөлдөө хэрхэн оруулах, багцлах албан ёсны гарын авлага.

Энэ хуудсан дээр
Та эцэс хүртэл алгасмаар байна уу? Энэ гарын авлагын эх код болон ажлын демо-г twbs/examples репозитороос татаж авна уу . Та мөн жишээг StackBlitz дээр нээж шууд засварлах боломжтой.

Тохируулах

Бид Bootstrap-тай Webpack төслийг эхнээс нь бүтээж байгаа тул бид үнэхээр эхлэхээс өмнө зарим урьдчилсан нөхцөл, эхний алхамууд байна. Энэхүү гарын авлага нь танаас Node.js суулгасан байх ба терминалын талаар тодорхой мэдлэгтэй байхыг шаарддаг.

  1. Төслийн хавтас үүсгээд npm-г тохируулна уу. Бид хавтас үүсгэж, бүх интерактив асуултуудыг асуухгүйн тулд аргументаар my-projectnpm-г эхлүүлнэ .-y

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

  2. Webpack суулгана уу. Дараа нь бид Webpack-ийн хөгжүүлэлтийн хамаарлыг суулгах хэрэгтэй: Webpack webpack-ийн үндсэн хэсэгт зориулж webpack-cliбид терминалаас Webpack командуудыг webpack-dev-serverажиллуулж, локал хөгжүүлэлтийн серверийг ажиллуулах боломжтой. --save-devЭдгээр хамаарал нь зөвхөн хөгжүүлэлтэд зориулагдсан болохоос үйлдвэрлэлд зориулагдаагүй гэдгийг бид дохио өгдөг.

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

  3. Bootstrap суулгана уу. Одоо бид Bootstrap суулгаж болно. Бидний унадаг цэс, поповер, зөвлөмжүүд нь байршлаас нь хамаардаг тул бид бас Попперыг суулгах болно. Хэрэв та эдгээр бүрэлдэхүүн хэсгүүдийг ашиглахаар төлөвлөөгүй бол Попперыг энд орхиж болно.

    npm i --save bootstrap @popperjs/core

  4. Нэмэлт хамаарлыг суулгана уу. 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-ыг тохируулж, төслөө дотооддоо ажиллуулах боломжтой боллоо.

  1. Редактор 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
  }
}

  2. Дараа нь бид бөглөнө үү dist/index.html. Энэ бол багцалсан CSS болон JS-г ашиглахын тулд вэб багцыг хөтөч дээр ачаалах HTML хуудас бөгөөд бид дараа дараагийн алхамуудад нэмж оруулах болно. Үүнийг хийхийн өмнө бид түүнд үзүүлэх ямар нэг зүйл өгч, 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-ийн CSS-г Webpack-д ачаалах үед харахын тулд Bootstrap div class="container"- ийн загварчлалыг бага зэрэг оруулсан болно.<button>

  3. Одоо бидэнд Webpack-ийг ажиллуулахын тулд npm скрипт хэрэгтэй байна. Доор үзүүлсэн скриптийг нээгээд package.jsonнэмнэ startүү (та туршилтын скрипттэй байх ёстой). Бид энэ скриптийг ашиглан локал Webpack dev серверээ ажиллуулна.

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

  4. Эцэст нь бид Webpack-г эхлүүлж болно. Терминалынхаа хавтсаас шинээр my-projectнэмсэн npm скриптийг ажиллуулна уу:

    npm start
    Webpack dev сервер ажиллаж байна

Энэхүү гарын авлагын дараагийн болон эцсийн хэсэгт бид Webpack дуудагчийг тохируулж, Bootstrap-ийн бүх CSS болон JavaScript-г импортлох болно.

Bootstrap импортлох

Webpack руу Bootstrap-г импортлохын тулд эхний хэсэгт суулгасан дуудагч хэрэгтэй. Бид тэдгээрийг npm-ээр суулгасан боловч одоо Webpack-г ашиглахын тулд тохируулах шаардлагатай байна.

  1. -д ачигчийг тохируулна уу 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'
          }
        ]
      }
    ]
  }
}

    Бидэнд яагаад эдгээр бүх ачигч хэрэгтэйг тоймлон харуулав. HTML хуудасны элементэд style-loaderCSS-г оруулдаг, болон ашиглахад тусалдаг, Autoprefixer-д шаардлагатай бөгөөд Sass -г ашиглах боломжийг бидэнд олгодог.<style><head>css-loader@importurl()postcss-loadersass-loader

  2. Одоо Bootstrap-ийн CSS-г импортолъё. src/scss/styles.scssBootstrap-ийн бүх эх сурвалж Sass-ийг импортлохын тулд дараахыг нэмнэ үү .

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

    Хэрэв та хүсвэл манай загварын хуудсыг тусад нь оруулж болно. Дэлгэрэнгүйг манай Sass импортын баримт бичгийг уншина уу.

  3. Дараа нь бид 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 баримтуудыг уншина уу .

  4. Тэгээд та дууслаа! 🎉 Bootstrap-ийн эх сурвалж Sass болон JS бүрэн ачаалагдсан үед таны локал хөгжүүлэлтийн сервер одоо иймэрхүү харагдах болно.

    Bootstrap-тэй ажиллаж байгаа вэб багцын сервер

    Одоо та ашиглахыг хүссэн Bootstrap бүрэлдэхүүн хэсгүүдээ нэмж эхлэх боломжтой. Өөрт хэрэгтэй Bootstrap-ын CSS болон JS-ийн хэсгүүдийг импортлох замаар нэмэлт захиалгат Sass-ийг хэрхэн оруулах, бүтээцээ оновчтой болгох талаар бүрэн гүйцэд Webpack жишээ төслийг шалгахаа мартуузай .

Үйлдвэрлэлийн оновчлол

Таны тохиргооноос хамааран та төслийг үйлдвэрлэлд явуулахад хэрэгтэй нэмэлт аюулгүй байдал, хурдыг оновчтой болгохыг хүсч болно. Эдгээр оновчлолыг Webpack жишээ төсөл дээр хэрэгжүүлээгүй бөгөөд хэрэгжүүлэх нь танаас хамаарна гэдгийг анхаарна уу.

CSS задалж байна

Бидний style-loaderдээр тохируулсан нь CSS-г багцад хялбархан гаргадаг тул CSS файлыг гараар ачаалах dist/index.htmlшаардлагагүй болно. Энэ арга нь Агуулгын аюулгүй байдлын хатуу бодлоготой ажиллахгүй байж магадгүй бөгөөд багцын хэмжээ том учраас таны аппликешнд саад болж болзошгүй.

CSS-г салгахын тулд бид үүнийг шууд -аас ачаалахын dist/index.htmlтулд mini-css-extract-loaderWebpack залгаасыг ашиглана уу.

Эхлээд залгаасыг суулгана уу:

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

Дахин ажиллуулсны дараагаар импортолсон бүх CSS файлыг агуулсан npm run buildшинэ файл гарч ирнэ . Хэрэв та хөтчөөсөө одоо үзэх юм бол одоо байгаа шиг загвар байхгүй болно . Та үүсгэсэн CSS-г дараах байдлаар оруулж болно .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 файлуудыг задалж байна

data:Bootstrap-ийн CSS нь inline URI -уудаар дамжуулан SVG файлуудын олон лавлагааг агуулдаг . Хэрэв та data:зургийн URI-г блоклодог төслийнхөө Агуулгын аюулгүй байдлын бодлогыг тодорхойлсон бол эдгээр SVG файлуудыг ачаалахгүй. Та Webpack-ийн хөрөнгийн модулиудын функцийг ашиглан шугаман SVG файлуудыг задлах замаар энэ асуудлыг даван туулж чадна.

Вэбпакыг дараах байдлаар 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: [

Дахин ажиллуулсны дараа та CSS-ээс npm run buildзадалж, зохих ёсоор лавласан SVG файлуудыг олох болно .dist/icons

Энд ямар нэг буруу эсвэл хуучирсан зүйл харагдаж байна уу? GitHub дээр асуудал нээнэ үү . Асуудлыг олж засварлахад тусламж хэрэгтэй байна уу? GitHub дээр хайлт хийх эсвэл хэлэлцүүлэг эхлүүлэх .