عرض مصدر Bootstrap/webpack

<noinclude>{{DISPLAYTITLE:تضمين Bootstrap باستخدام Webpack}}</noinclude>
تعلّم كيف تُضمّن Bootstrap في مشروعك باستخدام Webpack 3.
== تثبيت Bootstrap ==
استخدم [[Bootstrap/download#npm|npm لتثبيت Bootstrap]] بصيغة وِحدة Node.js.

== استيراد JavaScript ==
استورد  [[Bootstrap/javascript|ملفات JavaScript]] في [[Bootstrap]] بإضافة السطر التالي إلى مَدخَل تطبيقك (عادة <code>index.js</code> أو <code>app.js</code>)<syntaxhighlight lang="javascript">
import 'bootstrap';
</syntaxhighlight>يمكنك بدلا من ذلك '''استيراد المُلحقات Plugins''' حسب الحاجة:<syntaxhighlight lang="javascript">
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
</syntaxhighlight>يعتمد Bootstrap على [[jQuery]] و [https://popper.js.org/ Popper] المُعرَّفة على أنها <code>peerDependencies</code>، بمعنى أنه يجب عليك التأكد من إضافة الاثنين إلى الملف <code>package.json</code> بالأمر:<syntaxhighlight lang="shell">
npm install --save jquery popper.js
</syntaxhighlight>
== استيراد التنسيقات ==

=== استيراد ملفات Sass المُجمَّعة مسبقًا ===
اجعل الملفات المصدرية جزءًا من عملية الإنشاء في مشروعك للاستفادة القصوى من [[Bootstrap]] وتخصيصه حسب احتياجاتك.

أنشئ أولًا الملف ‎<code>_custom.scss</code> واستخدمه لإبطال الخيارات المبدئية؛ ثم استخدم ملف Sass الأساسي لاستيراد متغيّراتك المخصَّصة متبوعة بإطار العمل Bootstrap:<syntaxhighlight lang="sass">
@import "custom"; 
@import "~bootstrap/scss/bootstrap";
</syntaxhighlight>تأكّد من تثبيت المُحمِّلات (Loaders) المطلوبة واستخدامها لكي يُجمَّع Bootstrap، وهي: [https://github.com/webpack-contrib/sass-loader sass-loader] و [https://github.com/postcss/postcss-loader postcss-loader] مع [https://github.com/postcss/autoprefixer#webpack Autoprefixer]. تحوي إعدادات Webpack الدنيا القاعدة التاليّة أو ما يشبهها:<syntaxhighlight lang="sass">
...
{
  test: /\.(scss)$/,
  use: [{
    loader: 'style-loader', // inject CSS to page
  }, {
    loader: 'css-loader', // translates CSS into CommonJS modules
  }, {
    loader: 'postcss-loader', // Run postcss actions
    options: {
      plugins: function () { // postcss plugins, can be exported to postcss.config.js
        return [
          require('autoprefixer')
        ];
      }
    }
  }, {
    loader: 'sass-loader' // compiles Sass to CSS
  }]
},
...
</syntaxhighlight>

=== استيراد ملفات CSS المُجمَّعة ===
يمكن كذلك استخدام ملفات CSS الجاهزة للاستخدام من Bootstrap بسهولة وذلك بإضافة السطر التالي إلى مدخل التطبيق:<syntaxhighlight lang="sass">
import 'bootstrap/dist/css/bootstrap.min.css';
</syntaxhighlight>يمكن في هذه الحالة استخدام قاعدة CSS موجودة سلفًا بدون تغييرات خاصّة على إعدادات Webpack، باستثناء أنه لا حاجة لاستخدام <code>sass-loader</code>، فقط  [https://github.com/webpack-contrib/style-loader style-loader] و [https://github.com/webpack-contrib/css-loader css-loader].<syntaxhighlight lang="sass">
 ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
  ...
</syntaxhighlight>

== مصادر ==
* صفحة [https://getbootstrap.com/docs/4.5/getting-started/webpack/ Webpack] في توثيق Bootstrap.
[[تصنيف:Bootstrap|{{SUBPAGENAME}}]]
[[تصنيف:Bootstrap Getting Started|{{SUBPAGENAME}}]]
[[تصنيف:Webpack|{{SUBPAGENAME}}]]