أثناء قيامي إدارة ملفات 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.jsconst RemoveEmptyAssetsPlugin = require('./RemoveEmptyAssetsPlugin');
module.exports = {
....
plugins: [
....,
new RemoveEmptyAssetsPlugin(),
],
};الآن عندما تقوم بتنفيذ أمر build، لن تجد أي ملف فارغ موجود فيه.
npm run build
# or
webpack --mode production