حذف الملفات الفارغة من Webpack build

تاريخ التحديث: 5 أكتوبر 2026قراءة دقيقة

باختصار

حل مؤقت لمشكلة الملفات الفارغة التي تظهر بعد WebPack Build: إضافة RemoveEmptyAssetsPlugin لمشروعك خطوة بخطوة.

أثناء قيامي إدارة ملفات CSS و JS لمشروع باستخدام WebPack، واجهت مشكلة بوجود ملفات فارغة بعد القيام بــ WebPack Build. بحثت حول المشكلة، وجدت أنها مشكلة واجهت بعض من المطورين، وأحدهم قام بإضافة حل مؤقت لها. سأقوم بمشاركة هذا الحل في هذا المقتطف.

الخطوة الأولى: قم بإنشاء ملف جديد داخل مشروع WebPack الذي تعمل عليه.

File: ./RemoveEmptyAssetsPlugin.js
Source: https://github.com/webpack/webpack/pull/17424/commits/b0c82d6ecf96e0cc477c501fa9b3a44e79412a25

/*
	MIT License http://www.opensource.org/licenses/mit-license.php
	Author Tobias Koppers @sokra
*/

'use strict';

/** @typedef {import("../Compiler")} Compiler */

class RemoveEmptyAssetsPlugin {
  /**
   * Apply the plugin
   * @param {Compiler} compiler the compiler instance
   * @returns {void}
   */
  apply(compiler) {
    compiler.hooks.compilation.tap('RemoveEmptyAssetsPlugin', (compilation) => {
      compilation.hooks.afterProcessAssets.tap(
        'RemoveEmptyAssetsPlugin',
        (assets) => {
          Object.entries(assets).forEach(([assetName, asset]) => {
            if (asset.size()) return;

            compilation.deleteAsset(assetName);
          });
        }
      );
    });
  }
}

module.exports = RemoveEmptyAssetsPlugin;

الخطوة الثانية: قم باستيراد ملف الاضافة الجديد في ملف إعدادات WebPack

File: webpack.config.js

const RemoveEmptyAssetsPlugin = require('./RemoveEmptyAssetsPlugin');
module.exports = {
  ....
  plugins: [
    ....,
    new RemoveEmptyAssetsPlugin(),
  ],
};

الآن عندما تقوم بتنفيذ أمر build، لن تجد أي ملف فارغ موجود فيه.

npm run build 
# or
webpack --mode production

حذف الملفات الفارغة من Webpack build

باختصار

مقتطفات ذات صلة في عام