لغات التخصيص

يقبل webpack ملفات تخصيص مكتوبة بعدّة لغات برمجة ولغات بيانات. تجد قائمة بامتدادات الملفات المدعومة في حزمة node-interpret. فعبر node-interpret، يستطيع webpack التعامل مع أنواع كثيرة ومختلفة من ملفات التخصيص.

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>
);

Edit this page·

« Previous

التخصيص