لغات التخصيص

يقبل 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؛ لذا ثبّت الحزمة التي يحتاجها التنسيق ضمن dev dependencies. إذا كانت الحزمة مفقودة، يتوقف webpack-cli ويخبرك تحديدًا بالحزمة المطلوب تثبيتها.

npm install --save-dev json5
# or
npm install --save-dev js-yaml
# or
npm install --save-dev toml

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

npx webpack --config webpack.config.toml

webpack.config.json5

{
  // JSON5 allows comments, unquoted keys and trailing commas
  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"

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

السابق ›

التخصيص

‹ التالي

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