مکيه مواد ڏانهن وڃو Docs نيويگيشن ڏانھن وڃو
Check
in English

بوٽ اسٽريپ ۽ ويب پيڪ

Webpack استعمال ڪندي Bootstrap جي CSS ۽ JavaScript کي توهان جي پروجيڪٽ ۾ ڪيئن شامل ۽ بنڊل ڪرڻ لاءِ سرڪاري گائيڊ.

هن صفحي تي
آخر تائين ڇڏڻ چاهيو ٿا؟ ڊائون لوڊ ڪريو سورس ڪوڊ ۽ ڪم ڪندڙ ڊيمو هن گائيڊ لاءِ twbs/examples repository مان . توھان پڻ کولي سگھو ٿا مثال StackBlitz ۾ لائيو ايڊيٽنگ لاءِ.

سيٽ اپ ڪريو

اسان شروع کان بوٽ اسٽريپ سان هڪ ويب پيڪ پروجيڪٽ ٺاهي رهيا آهيون، تنهنڪري اسان واقعي شروع ڪرڻ کان پهريان ڪجهه شرطون ۽ اڳيون قدم آهن. هي گائيڊ توهان کي گهربل آهي Node.js انسٽال ڪيو ۽ ٽرمينل سان ڪجهه واقفيت.

  1. پروجيڪٽ فولڊر ٺاهيو ۽ سيٽ اپ ڪريو npm. اسان my-projectفولڊر ٺاهينداسين ۽ npm کي -yدليل سان شروع ڪنداسين ته ان کان بچڻ لاءِ اسان سڀني انٽرايڪٽو سوالن کان پڇڻ.

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

  2. انسٽال ڪريو Webpack. اڳيون اسان کي اسان جي Webpack ڊولپمينٽ انحصار کي انسٽال ڪرڻ جي ضرورت آهي: webpackWebpack جي بنيادي لاءِ، 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 کان علاوه، اسان کي ڪجھ وڌيڪ انحصار جي ضرورت آھي صحيح طور تي درآمد ڪرڻ ۽ بنڊل بوٽ اسٽريپ جي CSS ۽ JS کي Webpack سان. انهن ۾ شامل آهن Sass، ڪجهه لوڊ ڪندڙ، ۽ Autoprefixer.

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

ھاڻي ته اسان وٽ تمام ضروري انحصار انسٽال ٿيل آھي، اسان ڪم ڪري سگھون ٿا پروجيڪٽ فائلون ٺاهڻ ۽ بوٽ اسٽريپ درآمد ڪرڻ.

منصوبي جي جوڙجڪ

اسان اڳ ۾ ئي my-projectفولڊر ٺاهي ڇڏيو آهي ۽ اين پي ايم جي شروعات ڪئي آهي. هاڻي اسان پروجيڪٽ جي ڍانچي کي گول ڪرڻ لاءِ پنهنجا 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توهان جي ايڊيٽر ۾ کوليو . جيئن ته اهو خالي آهي، اسان کي ان ۾ ڪجهه بوائلر پليٽ ترتيب شامل ڪرڻ جي ضرورت پوندي ته جيئن اسان پنهنجو سرور شروع ڪري سگهون. config جو هي حصو ٻڌائي ٿو Webpack اسان جي پروجيڪٽ جي جاوا اسڪرپٽ کي ڳولڻ لاءِ هئا، جتي مرتب ڪيل ڪوڊ کي ( 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. هي آهي HTML صفحو Webpack برائوزر ۾ لوڊ ٿيندو بنڊل ٿيل CSS ۽ JS کي استعمال ڪرڻ لاءِ جنهن کي اسان ان ۾ شامل ڪنداسين بعد ۾. ان کان اڳ اسان اهو ڪري سگهون ٿا، اسان کي ان کي ڪجهه ڏيڻو پوندو رينجر ۽ شامل ڪرڻ لاءِ outputJS پوئين قدم کان.

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

    اسان هتي بوٽ اسٽريپ اسٽائل جو ٿورڙو شامل ڪري رهيا آهيون div class="container"۽ <button>انهي ڪري ته اسان ڏسون ٿا جڏهن بوٽ اسٽريپ جي سي ايس ايس کي ويب پيڪ ذريعي لوڊ ڪيو ويندو آهي.

  3. ھاڻي اسان کي ھڪڙي اين پي ايم اسڪرپٽ جي ضرورت آھي Webpack کي هلائڻ لاءِ. کوليو 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 لوڊ ڪندڙ سيٽ اپ ڪنداسين ۽ سڀ بوٽ اسٽريپ جي CSS ۽ JavaScript درآمد ڪنداسين.

بوٽ اسٽريپ درآمد ڪريو

بوٽ اسٽريپ کي Webpack ۾ درآمد ڪرڻ لاءِ لوڊرز جي ضرورت آهي جيڪا اسان پهرين حصي ۾ نصب ڪئي آهي. اسان انھن کي 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'
          }
        ]
      }
    ]
  }
}

    هتي هڪ ريپ آهي ڇو ته اسان کي انهن سڀني لوڊ ڪندڙن جي ضرورت آهي. style-loaderCSS کي HTML صفحي جي <style>عنصر ۾ داخل ڪري ٿو، استعمال ڪرڻ ۾ مدد ڪري ٿو ۽ , Autoprefixer لاءِ گھربل آھي، ۽ اسان کي Sass استعمال ڪرڻ جي اجازت ڏئي ٿو.<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 لوڊ ڪريون ٿا ۽ بوٽ اسٽريپ جا جاوا اسڪرپٽ درآمد ڪريون ٿا. src/js/main.jsCSS کي لوڊ ڪرڻ لاءِ ھيٺ ڏنل شامل ڪريو ۽ سڀ بوٽ اسٽريپ جي JS درآمد ڪريو. پوپر بوٽ اسٽراپ ذريعي خودڪار طور تي درآمد ڪيو ويندو.

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

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

    توهان پڻ جاوا اسڪرپٽ پلگ ان درآمد ڪري سگهو ٿا انفرادي طور تي بنڊل جي سائز کي هيٺ رکڻ لاءِ.

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

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

    Bootstrap جي پلگ ان کي ڪيئن استعمال ڪجي ان بابت وڌيڪ معلومات لاءِ اسان جا جاوا اسڪرپٽ جا دستاويز پڙهو .

  4. ۽ توهان ڪيو آهي! 🎉 بوٽ اسٽريپ جي ماخذ سان Sass ۽ JS مڪمل طور تي لوڊ ٿي ويو آهي، توهان جي مقامي ترقياتي سرور کي هاڻي هن وانگر ڏسڻ گهرجي.

    بوٽ اسٽريپ سان هلندڙ Webpack dev سرور

    ھاڻي توھان شروع ڪري سگھوٿا ڪو به بوٽ اسٽراپ اجزاء شامل ڪرڻ جيڪي توھان استعمال ڪرڻ چاھيو ٿا. پڪ ڪريو ته مڪمل Webpack مثال پروجيڪٽ ڏسو ته ڪيئن اضافي ڪسٽم ساس شامل ڪجي ۽ صرف بوٽ اسٽريپ جي سي ايس ايس ۽ جي ايس جا حصا درآمد ڪري پنهنجي تعمير کي بهتر بڻائين جيڪي توهان کي گهربل آهن.

پيداوار جي اصلاح

توھان جي سيٽ اپ تي مدار رکندي، توھان چاھيو ٿا ڪجھ اضافي سيڪيورٽي ۽ رفتار جي اصلاحن کي لاڳو ڪرڻ لاءِ ڪارآمد پيداوار ۾ پروجيڪٽ کي هلائڻ لاءِ. نوٽ ڪريو ته اهي اصلاحون Webpack مثال پروجيڪٽ تي لاڳو نه ڪيون ويون آهن ۽ لاڳو ڪرڻ توهان تي منحصر آهن.

CSS ڪڍڻ

style-loaderاسان مٿي ترتيب ڏنل آسانيءَ سان CSS کي بنڊل ۾ داخل ڪريون ٿا ته جيئن دستي طور تي 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هوندي، جنهن ۾ سڀني سي ايس ايس طرفان درآمد ڪئي ويندي src/js/main.js. جيڪڏھن توھان dist/index.htmlھاڻي توھان جي برائوزر ۾ ڏسو، انداز غائب ٿي ويندو، جيئن اھو ھاڻي آھي dist/main.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 فائلون ڪڍڻ

data:بوٽ اسٽريپ جي سي ايس ايس ۾ ان لائن URIs ذريعي SVG فائلن جا ڪيترائي حوالا شامل آهن . جيڪڏهن توهان وضاحت ڪريو مواد سيڪيورٽي پاليسي توهان جي پروجيڪٽ لاءِ جيڪا data:URIs کي بلاڪ ڪري ٿي تصويرن لاءِ، پوءِ اهي SVG فائلون لوڊ نه ٿينديون. توھان ھن مسئلي جي چوڌاري حاصل ڪري سگھو ٿا ان لائن SVG فائلن کي ڪڍڻ سان Webpack جي اثاثن جي ماڊل خصوصيت استعمال ڪندي.

ان لائن SVG فائلن کي ڪڍڻ لاءِ Webpack ترتيب ڏيو هن طرح:

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

ٻيهر هلائڻ کان پوء npm run build، توهان ڳوليندا SVG فائلن کي ڪڍيو ويو dist/icons۽ صحيح طور تي CSS مان حوالو ڏنو ويو.

هتي ڪجهه غلط يا پراڻي ڏسو؟ مهرباني ڪري GitHub تي هڪ مسئلو کوليو . مسئلو حل ڪرڻ ۾ مدد جي ضرورت آهي؟ ڳوليو يا گيٽ هب تي بحث شروع ڪريو.