التكاملات

لنبدأ بتوضيح لبس شائع. Webpack هو مجمّع وحدات مثل Browserify أو Brunch. وهو ليس مشغّل مهام مثل Make أو Grunt أو Gulp. تتولى مشغلات المهام أتمتة مهام التطوير الشائعة مثل فحص الكود، أو بناء المشروع، أو اختباره. وبالمقارنة مع أدوات التجميع، يكون تركيز مشغلات المهام على مستوى أعلى. لا يزال بإمكانك الاستفادة من أدواتها عالية المستوى مع ترك مشكلة التجميع لـ webpack.

تساعدك أدوات التجميع على تجهيز JavaScript وملفات الأنماط للنشر، وذلك بتحويلها إلى صيغة مناسبة للمتصفح. على سبيل المثال، يمكن تصغير JavaScript أو تقسيمه إلى أجزاء وتحميله كسولًا لتحسين الأداء. يُعد التجميع أحد أهم تحديات تطوير الويب، وحلّه جيدًا يمكن أن يزيل كثيرًا من التعقيد من العملية.

الخبر الجيد هو أنه رغم وجود بعض التداخل، يمكن لمشغلات المهام وأدوات التجميع العمل معًا بشكل جيد إذا تم التعامل معها بالطريقة المناسبة. يقدم هذا الدليل نظرة عامة عالية المستوى على كيفية دمج webpack مع بعض مشغلات المهام الأكثر شيوعًا.

سكربتات NPM

غالبًا ما يستخدم مستخدمو webpack scripts الخاصة بـ npm كمشغّل مهام. هذه نقطة بداية جيدة. قد يصبح دعم المنصات المختلفة مشكلة، لكن توجد عدة حلول بديلة لذلك. كثير من المستخدمين، إن لم يكن معظمهم، يكتفون بـ npm scripts ومستويات مختلفة من إعدادات webpack وأدواته.

لذلك، ورغم أن تركيز webpack الأساسي هو التجميع، توجد مجموعة متنوعة من الإضافات التي تتيح لك استخدامه في أعمال معتادة لمشغلات المهام. إن دمج أداة منفصلة يضيف تعقيدًا، لذا احرص على موازنة المزايا والعيوب قبل المتابعة.

Grunt

لمن يستخدمون Grunt، نوصي بحزمة grunt-webpack. باستخدام grunt-webpack يمكنك تشغيل webpack أو webpack-dev-server كمهمة، والوصول إلى الإحصاءات داخل وسوم القوالب، وفصل إعدادات التطوير والإنتاج، وغير ذلك. ابدأ بتثبيت grunt-webpack وكذلك webpack نفسه إذا لم تكن قد ثبّته بعد:

npm install --save-dev grunt-webpack webpack

ثم سجّل الإعدادات وحمّل المهمة:

Gruntfile.js

const webpackConfig = require("./webpack.config.js");

module.exports = function (grunt) {
  grunt.initConfig({
    webpack: {
      options: {
        stats: !process.env.NODE_ENV || process.env.NODE_ENV === "development",
      },
      prod: webpackConfig,
      dev: { watch: true, ...webpackConfig },
    },
  });

  grunt.loadNpmTasks("grunt-webpack");
};

لمزيد من المعلومات، يُرجى زيارة المستودع.

Gulp

يُعد التكامل مع Gulp مباشرًا نسبيًا أيضًا بمساعدة حزمة webpack-stream (المعروفة أيضًا باسم gulp-webpack). في هذه الحالة، لا حاجة إلى تثبيت webpack بشكل منفصل لأنه تبعية مباشرة لـ webpack-stream:

npm install --save-dev webpack-stream

يمكنك استخدام require('webpack-stream') بدلًا من webpack وتمرير إعدادات إليه اختياريًا:

gulpfile.js

import gulp from "gulp";
import webpack from "webpack-stream";

gulp.task("default", () =>
  gulp
    .src("src/entry.js")
    .pipe(
      webpack({
        // أي خيارات إعدادات...
      }),
    )
    .pipe(gulp.dest("dist/")),
);

لمزيد من المعلومات، يُرجى زيارة المستودع.

Mocha

يمكن استخدام أداة mocha-webpack لتكامل نظيف مع Mocha. يقدم المستودع تفاصيل أكثر حول المزايا والعيوب، لكن mocha-webpack في جوهره غلاف بسيط يوفر تقريبًا واجهة CLI نفسها الخاصة بـ Mocha، مع وظائف متعددة من webpack مثل وضع مراقبة محسّن وحل مسارات أفضل. إليك مثالًا صغيرًا على كيفية تثبيتها واستخدامها لتشغيل مجموعة اختبارات (موجودة داخل ./test):

npm install --save-dev webpack mocha mocha-webpack
mocha-webpack 'test/**/*.js'

لمزيد من المعلومات، يُرجى زيارة المستودع.

Karma

تتيح لك حزمة karma-webpack استخدام webpack للمعالجة المسبقة للملفات داخل Karma.

npm install --save-dev webpack karma karma-webpack

karma.conf.js

export default function (config) {
  config.set({
    frameworks: ["webpack"],
    files: [
      { pattern: "test/*_test.js", watched: false },
      { pattern: "test/**/*_test.js", watched: false },
    ],
    preprocessors: {
      "test/*_test.js": ["webpack"],
      "test/**/*_test.js": ["webpack"],
    },
    webpack: {
      // أي إعدادات webpack مخصصة...
    },
    plugins: ["karma-webpack"],
  });
}

لمزيد من المعلومات، يُرجى زيارة المستودع.