الإدخال المتقدم

أنواع ملفات متعددة لكل إدخال

من الممكن توفير أنواع مختلفة من الملفات عند استخدام مصفوفة من القيم مع entry، وذلك لإنشاء حزم منفصلة لملفات CSS وJavaScript (وغيرها) في التطبيقات التي لا تستخدم import لاستيراد الأنماط داخل JavaScript (مثل التطبيقات السابقة لنمط Single Page Applications أو لأسباب أخرى).

لنأخذ مثالًا. لدينا تطبيق PHP يحتوي على نوعين من الصفحات: home وaccount. تمتلك صفحة home تخطيطًا مختلفًا وJavaScript غير قابل للمشاركة مع بقية التطبيق (صفحة account). نريد إخراج home.js وhome.css من ملفات التطبيق الخاصة بصفحة home، وكذلك account.js وaccount.css لصفحة account.

home.js

console.log("home page type");

home.scss

// أنماط منفردة لصفحة home

account.js

console.log("account page type");

account.scss

// أنماط منفردة لصفحة account

سنستخدم MiniCssExtractPlugin في وضع production مع css باعتبار ذلك ممارسة جيدة.

webpack.config.js

import MiniCssExtractPlugin from "mini-css-extract-plugin";

export default {
  mode: process.env.NODE_ENV,
  entry: {
    home: ["./home.js", "./home.scss"],
    account: ["./account.js", "./account.scss"],
  },
  output: {
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          // الرجوع إلى style-loader في وضع التطوير
          process.env.NODE_ENV !== "production"
            ? "style-loader"
            : MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader",
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),
  ],
};

سيؤدي تشغيل webpack بالإعدادات أعلاه إلى الإخراج داخل ./dist لأننا لم نحدد مسار إخراج مختلفًا. سيحتوي مجلد ./dist الآن على أربعة ملفات:

• home.js
• home.css
• account.js
• account.css