لغات التخصيص

يقبل webpack ملفات تخصيص مكتوبة بلغات برمجة وصيغ بيانات متعددة، ما يتيح لك اختيار الصيغة الأنسب لمشروعك: JavaScript أو TypeScript أو CoffeeScript، أو ملف بيانات مثل JSON5 أو YAML أو TOML.

defineConfig

5.108.0+

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

webpack.config.js

const { defineConfig } = require("webpack");

module.exports = defineConfig({
  mode: "none",
});

تقبل الدالة جميع الأشكال التي يستطيع webpack-cli تحميلها: كائن تخصيص واحد، أو مصفوفة تخصيصات (multi-compiler)، أو دالة تعيد أحد هذين الشكلين، أو مصفوفة من هذه الدوال، أو Promise يُرجع أيًا منها.

const { defineConfig } = require("webpack");

module.exports = defineConfig((env, argv) => ({
  mode: argv.mode ?? "development",
  // ...
}));

TypeScript

لكتابة تخصيص webpack بلغة TypeScript، ثبّت أوّلاً الاعتماديات اللازمة، وهي TypeScript وتعريفات الأنواع ذات الصلة من مشروع DefinitelyTyped:

npm install --save-dev typescript ts-node @types/node
# وإن كنت تستخدم webpack-dev-server بإصدار أقل من v4.7.0
npm install --save-dev @types/webpack-dev-server

ثم ابدأ بكتابة التخصيص:

webpack.config.ts

import path from "node:path";
import { fileURLToPath } from "node:url";

import webpack from "webpack";
// في حال واجهتك أخطاء TypeScript عند تخصيص `devServer`
import "webpack-dev-server";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const config: webpack.Configuration = {
  mode: "production",
  entry: "./foo.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "foo.bundle.js",
  },
};

export default config;

tsconfig.json

{
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "bundler",

    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "isolatedModules": true,

    // يتيح لك كتابة `import ... from './file.ts';`
    "rewriteRelativeImportExtensions": true
  }
}

يفترض المثال السابق أنّك تستخدم إصدار TypeScript رقم 2.7 أو أحدث، مع تفعيل خياري esModuleInterop و allowSyntheticDefaultImports في ملف tsconfig.json.

ندعم التخصيص بصيغة CommonJS و ESM معاً.

بدءاً من الإصدار v22.18.0، أصبح Node.js يدعم إزالة الأنواع (type stripping) بشكل أصلي، ولذلك فإنّ الإعدادات الإضافية الموضّحة أدناه ليست مطلوبة إلا للإصدارات الأقدم.

لتفعيل تحويل صياغات TypeScript غير القابلة للحذف، التي تحتاج إلى توليد شيفرة JavaScript مثل تصريحات enum وخصائص المُعاملات (parameter properties)، استخدم الراية --experimental-transform-types.

إذا كنت تستخدم إصداراً أقدم من Node.js لا يدعم صيغة typescript، أو أردت ضبط module في compilerOptions ضمن tsconfig.json على commonjs، فأمامك ثلاثة حلول لهذه المشكلة:

تعديل tsconfig.json.
تعديل tsconfig.json وإضافة إعدادات خاصة بـ ts-node.
تثبيت tsconfig-paths.

الحلّ الأول: افتح ملف tsconfig.json وابحث عن compilerOptions، ثم اضبط target على "ES5" و module على "CommonJS" (أو احذف خيار module تماماً).

الحلّ الثاني: أضِف إعدادات خاصة بـ ts-node.

يمكنك إبقاء "module": "ESNext" لـ tsc، وإن كنت تستعمل webpack أو أداة بناء أخرى، فاضبط قيمة بديلة لـ ts-node. توثيق إعداد ts-node

{
  "compilerOptions": {
    "module": "ESNext"
  },
  "ts-node": {
    "compilerOptions": {
      "module": "CommonJS"
    }
  }
}

الحلّ الثالث: ثبّت حزمة tsconfig-paths:

npm install --save-dev tsconfig-paths

ثم أنشئ تخصيصاً مستقلاً لـ TypeScript مخصّصاً لملفات تخصيص webpack:

tsconfig-for-webpack-config.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "esModuleInterop": true
  }
}

ثم اضبط متغيّر البيئة process.env.TS_NODE_PROJECT الذي توفّره tsconfig-paths على النحو التالي:

package.json

{
  "scripts": {
    "build": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack"
  }
}

كوفي سكريبت

بالطريقة نفسها، لاستخدام CoffeeScript، ثبّت أوّلاً الاعتماديات اللازمة:

npm install --save-dev coffeescript

ثم اكتب التخصيص:

webpack.config.coffee

import path from 'node:path'
import { fileURLToPath } from 'node:url'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import webpack from 'webpack'

__filename = fileURLToPath(import.meta.url)
__dirname = path.dirname(__filename)

config =
  mode: 'production'
  entry: './path/to/my/entry/file.js'
  output:
    path: path.resolve(__dirname, 'dist')
    filename: 'my-first-webpack.bundle.js'
  module:
    rules: [
      {
        test: /\.(js|jsx)$/
        use: 'babel-loader'
      }
    ]
  plugins: [
    new HtmlWebpackPlugin(template: './src/index.html')
  ]

export default config

Babel و JSX

في المثال أدناه، يُستخدم JSX (صياغة JavaScript الخاصة بـ React) مع Babel لإنشاء تخصيص بصيغة JSON يستطيع webpack فهمه.

بفضل من Jason Miller

ثبّت أوّلاً الاعتماديات اللازمة:

npm install --save-dev babel-register jsxobj babel-preset-es2015

.babelrc

{
  "presets": ["es2015"]
}

webpack.config.babel.js

import jsxobj from "jsxobj";

// مثال على plugin مستورد
const CustomPlugin = (config) => ({
  ...config,
  name: "custom-plugin",
});

export default (
  <webpack target="web" watch mode="production">
    <entry path="src/index.js" />
    <resolve>
      <alias
        {...{
          react: "preact-compat",
          "react-dom": "preact-compat",
        }}
      />
    </resolve>
    <plugins>
      <CustomPlugin foo="bar" />
    </plugins>
  </webpack>
);

صيغ البيانات (JSON5 وYAML وTOML)

webpack-cli v7.1.0+

إذا كان تخصيصك يتكون من بيانات ثابتة فقط، بلا دوال أو قراءة من process.env أو قيم محسوبة، فيمكنك كتابته كملف بيانات بدلًا من JavaScript. يحلل webpack-cli الامتدادات التالية مباشرة:

الامتداد	حزمة المحلل
`.json5`	`json5`
`.yaml`, `.yml`	`js-yaml`
`.toml`	`toml`

لا تأتي حزمة المحلل مدمجة مع webpack-cli؛ ثبّت الحزمة المناسبة للصيغة التي اخترتها ضمن اعتماديات التطوير. إذا لم تكن مثبتة، فسيتوقف webpack-cli ويخبرك بالحزمة المطلوبة.

npm install --save-dev json5
# أو
npm install --save-dev js-yaml
# أو
npm install --save-dev toml

مرّر مسار الملف إلى --config، أو اختر له اسمًا يتيح اكتشافه بوصفه ملف التخصيص الافتراضي، مثل webpack.config.json5:

npx webpack --config webpack.config.toml

webpack.config.json5

{
  // تتيح JSON5 التعليقات والمفاتيح غير المحاطة بعلامات اقتباس والفواصل الختامية
  mode: "production",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
  },
}

webpack.config.yaml

mode: production
entry: ./src/index.js
output:
  filename: bundle.js

webpack.config.toml

mode = "production"
entry = "./src/index.js"

[output]
filename = "bundle.js"

·تعديل هذه الصفحة

السابق ›

التخصيص

‹ التالي

أنواع التخصيص