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

developer_modeتطوير الويب bookmarkعام

أثناء قيامي إدارة ملفات 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

أحدث المقتطفات

إعلان من الغوغل

التصنيفات