كيفية بدء مشروع تطبيق ويب باستخدام Bootstrap مع NPM و Webpack

الإعداد الأولي

لنقم أولاً بإنشاء مجلد وتهيئة npm وتثبيت حزمة الويب محليًا وتثبيت webpack-cli.

$ mkdir bootstrap-npm-webpack && cd bootstrap-npm-webpack
$ npm init -y
npm $ تثبيت webpack - حفظ ديف
npm $ تثبيت webpack-cli - حفظ ديف

قم بإنشاء بنية المجلد التالية للمشروع الخاص بك ، شفرة المصدر في مجلد src ورمز التوزيع المجمع dist.

تثبيت Bootstrap

قم بتثبيت Bootstrap مع تبعيات نظيرها jQuery & Propper.JS

npm $ تثبيت bootstrap jquery popper.js - حفظ

إذا كنت ترغب في استيراد مكونات جافا سكريبت الخاصة بـ Bootstrap بشكل فردي حسب الحاجة ، يجب عليك أيضًا تثبيت محمل الصادرات.

npm $ تثبيت الصادرات محمل - حفظ ديف

يجب أن تحتاج إلى تثبيت الإضافات المطلوبة والإضافات postcss لجمع وتجميع ملفات ساس المترجمة مسبقًا.

$ npm install autoprefixer css-loader node-sass postcss-loader sass-loader style-loader --save-dev

ملف تكوين Webpack

قم بإنشاء ملف تكوين webpack.config.js في مجلد جذر المشروع. تعرف على المزيد حول تكوين webpack من هنا.

webpack.config.js

const مسار = تتطلب ('مسار') ؛

module.exports = {
  الإدخال: './src/app.js' ،
  انتاج: {
    اسم الملف: 'bundle.js' ،
    path: path.resolve (__ dirname، 'dist')
  }،
  وحدة: {
    قواعد: [
      {
        اختبار: / \ .(scss)$/ ،
        استعمال: [
          {
            // يضيف CSS إلى DOM عن طريق حقن علامة <