التخصيص

خارج الصندوق، لا يُلزمك webpack باستخدام ملف تخصيص. غير أنّه سيفترض أنّ نقطة الدخول لمشروعك هي src/index.js، وسيُخرج الناتج في dist/main.js مُصغَّراً ومُحسَّناً للإنتاج.

عادةً ما تحتاج مشاريعك إلى توسيع هذه الوظائف، ولهذا يمكنك إنشاء ملف webpack.config.js في المجلد الجذر، وسيلتقطه webpack تلقائياً.

كل خيارات التخصيص المتاحة موضّحة في الأسفل.

استخدام ملف تخصيص مختلف

إن أردت لسبب ما استخدام ملف تخصيص مختلف بحسب الموقف، يمكنك تغيير ذلك من سطر الأوامر عبر الراية --config.

package.json

"scripts": {
  "build": "webpack --config prod.config.js"
}

تجهيز مشروع webpack جديد

يحتوي webpack على مجموعة ضخمة من الخيارات قد تكون مربكة بالنسبة لك، لذا استفد من الأداة الجديدة create-webpack-app التي يقدّمها webpack-cli ابتداءً من الإصدار v6.0.0، وهي تُولّد لك تطبيق webpack بسرعة، بملفات تخصيص تناسب متطلبات مشروعك. ستطرح عليك بضعة أسئلة قبل أن تُنشئ ملف التخصيص.

npx create-webpack-app [command] [options]

قد يطلب منك npx تثبيت create-webpack-app إن لم يكن مثبَّتاً في المشروع أو على المستوى العام. وقد تُضاف إلى مشروعك حزم إضافية تبعاً للخيارات التي ستختارها أثناء توليد التطبيق الجديد.

$ npx create-webpack-app init

Need to install the following packages:
create-webpack-app@2.0.0
Ok to proceed? (y)

? Which of the following JS solutions do you want to use? Typescript
? Do you want to use webpack-dev-server? Yes
? Do you want to simplify the creation of HTML files for your bundle? Yes
? Do you want to add PWA support? No
? Which of the following CSS solutions do you want to use? CSS only
? Will you be using PostCSS in your project? Yes
? Do you want to extract CSS for every file? Only for Production
? Which package manager do you want to use? npm
[create-webpack] ℹ️ Initializing a new webpack project
...
...
...
[create-webpack] ✅ Project dependencies installed successfully!
[create-webpack] ✅ Project has been initialised with webpack!