كيفية تكوين Webpack 4 مع VueJS: دليل كامل

webpack والشعارات vue

لقد بدأت للتو وظيفة جديدة في شركة ناشئة تعمل على تطوير الجزء الأمامي الخاص بها باستخدام VueJS. كمطور ذو خلفية زاويّة ، بدأت أتشكك كثيرًا. ومع ذلك ، لقد نمت لتقدير VueJS لفهمها واستخدامها بسهولة. خلال الشهرين الماضيين ، عملت على العديد من أجزاء التطبيق التي مكنتني من تطوير معرفتي في VueJS بشكل كبير. تتمثل إحدى مسؤولياتي الأخيرة في ترقية حزمة الويب من أجل تحسين لوحة معلومات الشركة.

في هذه المقالة ، سوف أصف دليلًا تفصيليًا حول كيفية تكوين حزمة الويب لتحسين أي تطبيق VueJS.

تثبيت تبعيات المشروع

قم بإنشاء ملف package.json وابدأ بتثبيت تبعيات Vue و webpack.

"التبعيات": {
  "@ babel / polyfill": "~ 7.2" ،
  "vue": "~ 2.6" ،
  "vue-router": "~ 3.0"
}،
"devDependencies": {
  "@ babel / core": "~ 7.2" ،
  "@ babel / plug--class-properties-properties": "~ 7.3"،
  "@ babel / plugin-المقترح-decorators": "~ 7.3" ،
  "@ babel / plugin-propos-json-strings": "~ 7.2" ،
  "@ babel / plugin-syntax-dynamic-import": "~ 7.2" ،
  "@ babel / plugin-syntax-import-meta": "~ 7.2" ،
  "@ babel / preset-env": "~ 7.3" ،
  "بابل لودر": "~ 8.0" ،
  "compression-webpack-plugin": "~ 2.0" ،
  "عبر env": "~ 5.2" ،
  "css-loader": "~ 0.28" ،
  "friendly-errors-webpack-plugin": "~ 1.7" ،
  "html-webpack-plugin": "~ 3.2" ،
  "mini-css-extract-plugin": "~ 0.5" ،
  "node-sass": "~ 4.11" ،
  "تحسين-css-stocks-webpack-plugin": "~ 3.2" ،
  "sass-loader": "~ 7.1" ،
  "uglifyjs-webpack-plugin": "~ 1.2" ،
  "vue-loader": "~ 15.6" ،
  "vue style-loader": "~ 4.1" ،
  "vue-template-compiler": "~ 2.6" ،
  "webpack": "~ 4.29" ،
  "webpack-bundle-analys": "~ 3.0" ،
  "webpack-cli": "~ 3.2" ،
  "webpack-dev-server": "~ 3.1" ،
  "webpack-hot-softwareware": "~ 2.24" ،
  "webpack-merge": "~ 4.2"
}
webpack وشعارات بابل

ما هو بابل؟ وفقًا لموقع بابل الرسمي:

Babel هي سلسلة أدوات تستخدم بشكل رئيسي لتحويل كود ECMAScript 2015+ إلى إصدار متوافق مع الإصدارات السابقة من JavaScript في المتصفحات أو البيئات الحالية والأقدم. فيما يلي أهم الأشياء التي يمكن أن يقوم بها بابل لك:
- تحويل بناء الجملة
- ميزات Polyfill المفقودة في البيئة التي تستهدفها (من خلال @ babel / polyfill)
- تحويلات شفرة المصدر (برامج الترميز)
- و اكثر!
بابل مترجم (كود المصدر => كود الخرج). مثل العديد من المترجمين الآخرين ، يتم تشغيله على ثلاث مراحل: التحليل والتحويل والطباعة.
الآن ، من خارج الصندوق ، بابل لا يفعل أي شيء. انها تعمل أساسا مثل const babel = code => code؛ عن طريق تحليل الكود ثم إنشاء نفس الكود مرة أخرى. سوف تحتاج إلى إضافة ملحقات لبابل للقيام بأي شيء.
بدلاً من المكونات الإضافية الفردية ، يمكنك أيضًا تمكين مجموعة من المكونات الإضافية في إعداد مسبق.

.babelrc التكوين

{
  "المسبقة": [
    [
      "@ بابل / مسبقا-الحياة الفطرية"،
      {
        "الوحدات": خطأ ،
        "الأهداف": {
          "المتصفحات": ["> 1٪" ، "آخر نسختين" ، "ليس ie <= 8" ، "ie> = 11"]
        }
      }
    ]
  ]،
  "الإضافات": [
    "@ بابل / المساعد-تركيب ديناميكي والاستيراد"،
  ]
}
  • @ babel / preset-env يسمح لك باستخدام أحدث إصدار من جافا سكريبت دون الحاجة إلى القلق بشأن أي صيغة تحويل ستحتاجها في نهاية الأمر للبيئات المستهدفة.
  • البرنامج المساعد - بناء ديناميكي - الاستيراد أمر ضروري لتكون قادرة على استخدام التحميل كسول. وإلا لن يقوم webpack بتجميع بناء الجملة const AppHome = () => import ("@ / components / AppHome")؛

الأساس: تكوين webpack المشترك

سيحدد هذا القسم الإعدادات التي يتم مشاركتها عبر جميع البيئات في التطبيق الخاص بك: ملفات الإدخال والإضافات واللوادر.

الإدخال - تشير نقطة الإدخال إلى الحزمة التي يجب أن تستخدمها حزمة الويب للبدء في بناء رسم التبعية الداخلي الخاص بها. سوف يقوم Webpack باكتشاف الوحدات والمكتبات الأخرى التي تعتمد عليها نقطة الإدخال (بشكل مباشر وغير مباشر). فيما يلي نقطتي دخول مختلفتين: polyfill و main

الإدخال: {
  polyfill: '@ babel / polyfill' ،
  الرئيسية: helpers.root ('src' ، 'main') ،
}

حل - هذه الخيارات تغيير كيفية حل الوحدات النمطية.

حل: {
  الامتدادات: ['.js' ، '.vue'] ،
  الاسم المستعار: {
    'vue $': isDev؟ 'vue / dist / vue.runtime.js': 'vue / dist / vue.runtime.min.js' ،
    '@': helpers.root ('src')
  }
}
  • الامتدادات: تمكن المستخدمين من تجنب كتابة الامتداد عند الاستيراد

بدلا من الكتابة:

استيراد AppHome من "../../components/AppHome.vue"؛

يمكنك كتابة:

استيراد AppHome من "@ / components / AppHome" ؛
  • الاسم المستعار: يسمح باستيراد الوحدات النمطية أو طلبها بسهولة أكبر

بدلاً من استخدام المسارات النسبية عند الاستيراد ...

استيراد AppHome من "../../components/AppHome"؛

... يمكنك استخدام الاسم المستعار الذي تم إنشاؤه للتو

استيراد AppHome من "@ / components / AppHome" ؛

في dist / مجلد حزمة vue ، ستجد العديد من تصميمات Vue.js. فيما يلي نظرة عامة على الاختلافات بينهما.

شرح بنيات مختلفة

في حالتنا ، يتم تعيين vue إلى vue.runtime.js. يشير وقت التشغيل إلى التعليمات البرمجية المسؤولة عن إنشاء مثيلات Vue ، وتقديم وتصحيح DOM الظاهري ، وما إلى ذلك ... في الأساس ، كل شيء ناقص المترجم. من الضروري فهم هذا المفهوم لأننا نريد دائمًا إرسال عدد أقل من كيلوبايت إلى المتصفح

لجعل التطبيق يعمل بشكل صحيح بدون برنامج التحويل البرمجي ، تأكد من عدم الكشف مطلقًا عن مكون باستخدام قوالب السلسلة ...

// هذا يتطلب المترجم
Vue الجديد ({
    القالب: '
{{hi}}
' })

... واستخدم وظيفة التجسيد:

/ / هذا لا يتطلب المترجم
Vue الجديد ({
  تقديم (ح) {
    إرجاع h ('div' ، this.hi)
  }
})

اللوادر - تمكن حزمة الويب من استخدام اللوادر في تجهيز الملفات مسبقًا.

وحدة: {
    قواعد: [
      {
        اختبار: / \ vue$/ ،
        اللودر: 'vue-loader' ،
        تشمل: [helpers.root ('src')]
      }،
      {
        اختبار: / \. js$/ ،
        لودر: 'بابل لودر' ،
        تشمل: [helpers.root ('src')]
      }،
      {
        اختبار: / \ .css/
        استعمال: [
          هل ديف؟ 'vue style-loader': MiniCSSExtractPlugin.loader ،
          {loader: 'css-loader' ، الخيارات: {sourceMap: isDev}} ،
        ]
      }،
      {
        اختبار: / \ .scss$/ ،
        استعمال: [
          هل ديف؟ 'vue style-loader': MiniCSSExtractPlugin.loader ،
          {loader: 'css-loader' ، الخيارات: {sourceMap: isDev}} ،
          {loader: 'sass-loader' ، الخيارات: {sourceMap: isDev}}
        ]
      }،
      {
        اختبار: / \ sass$/ ،
        استعمال: [
          هل ديف؟ 'vue style-loader': MiniCSSExtractPlugin.loader ،
          {loader: 'css-loader' ، الخيارات: {sourceMap: isDev}} ،
          {loader: 'sass-loader' ، الخيارات: {sourceMap: isDev}}
        ]
      }
    ]
  }

بعض رافعات webpack قياسية إلى حد ما:

  • يتم تحميل ملفات. html مع html-loader
  • يتم تحميل ملفات .vue مع vue-loader
  • .js يتم تحميل الملفات مع بابل لودر

تختلف طريقة تحميل الأنماط حسب ما إذا كنت تعمل في مجال التطوير أو الإنتاج:

  • يتم تحميل ملفات .scs .scs و .sass بمحمل vue-style في وضع التطوير و MiniCSSExtractPlugin.loader في وضع الإنتاج. نقطة صعبة واحدة هي أن ملفات sass يتم تحميلها باستخدام محملين: sass-loader و css-loader.
  • يتم تعيين sourceMap إلى صحيح فقط أثناء التطوير. هذا مهم للغاية لجعل التصحيح أسهل فيما بعد.

الإضافات - يتم استخدام خيار الإضافات لتخصيص عملية إنشاء حزمة الويب بعدة طرق.

الإضافات: [
    VueLoaderPlugin () جديد ،
    HtmlPlugin الجديد ({
      القالب: 'index.html' ،
      chunksSortMode: 'التبعية'
    })
]