Clean Webpack Plugin: حافظ على بنية نظيفة

يعد "CleanWebpackPlugin" مكونًا إضافيًا شائعًا Webpack يساعدك في إدارة مخرجات الإنشاء عن طريق تنظيف الأدلة المحددة قبل إنشاء ملفات جديدة. يمكن أن يكون هذا مفيدًا لمنع تراكم الملفات القديمة أو غير الضرورية في دليل الإنشاء. فيما يلي شرح موجز لكيفية استخدام CleanWebpackPlugin:

تثبيت

أولاً ، تأكد من أنك قمت Webpack بالتثبيت webpack-cli والتثبيت في مشروعك ، كما هو موضح في الشروحات السابقة. ثم قم بتثبيت CleanWebpackPlugin:

npm install clean-webpack-plugin --save-dev

إعدادات

افتح webpack.config.js ملفك واستورد المكون الإضافي:

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

داخل plugins المصفوفة ، قم بإنشاء مثيل لـ CleanWebpackPlugin:

module.exports = {  
  // ...other configuration options  
  
  plugins: [  
    new CleanWebpackPlugin()  
    // ...other plugins  
  ]  
};  

بشكل افتراضي ، سيقوم المكون الإضافي بتنظيف output.path المحدد في Webpack التكوين الخاص بك.

التكوين المخصص

يمكنك تخصيص سلوك CleanWebpackPlugin من خلال تمرير الخيارات إلى المنشئ الخاص به. على سبيل المثال:

new CleanWebpackPlugin({  
  cleanOnceBeforeBuildPatterns: ['**/*', '!importantFile.txt']  
})  

في هذا المثال ، سيتم تنظيف جميع الملفات والأدلة باستثناء ملفات importantFile.txt.

جري Webpack

عند تشغيلك Webpack لإنشاء مشروعك ، سيقوم CleanWebpackPlugin تلقائيًا بتنظيف الدلائل المحددة قبل إنشاء ملفات بناء جديدة.

تذكر الرجوع إلى الوثائق الرسمية clean-webpack-plugin للحصول على المزيد من التكوينات والخيارات المتقدمة. يمكن أن يساعد هذا المكون الإضافي بشكل كبير في الحفاظ على دليل إخراج بناء نظيف وتجنب الفوضى غير الضرورية.