إضافة ملفات عشوائية js فى مجلد dist عند تشغيل الموقع

هذه ليست مشكلة، إنما مع عمل تعديلات على الشيفرة يقوم مخدم ويب باك بإرسال التعديلات للمتصفح على شكل ملفات جافاسكربت صغيرة وهذه يمكن إيقاف كتابتهم على القرص من خلال خواص webpack dev server.

هي تدعى مثل hot reload أي إعادة التحميل السريع يمكن إيقافها بإضافة hot بقيمة false لكائن dev server 

مثل:.

devServer {
	hot: false
}

ضمن كائن إعداد ويب باك webpack config، كما في التوثيق: 

module.exports = {
  //...
  devServer: {
    hot: true,        // أضف هذه
  },
};

رابط التوثيق للاطلاع hot dev server

بتاريخ 21 دقائق مضت قال Wael Aljamal:

هذه ليست مشكلة، إنما مع عمل تعديلات على الشيفرة يقوم مخدم ويب باك بإرسال التعديلات للمتصفح على شكل ملفات جافاسكربت صغيرة وهذه يمكن إيقاف كتابتهم على القرص من خلال خواص webpack dev server.

هي تدعى مثل hot reload أي إعادة التحميل السريع يمكن إيقافها بإضافة hot بقيمة false لكائن dev server 

مثل:.

devServer {
	hot: false
}

ضمن كائن إعداد ويب باك webpack config، كما في التوثيق: 

module.exports = {
  //...
  devServer: {
    hot: true,        // أضف هذه
  },
};

رابط التوثيق للاطلاع hot dev server

عند التشغيل تظهر هذه الرسالة حتى بعد إستخدام الامر السابق hot: true

أعلم أنه تنبيه فقط ولكن يظهر دائما عند تشغيل المشروع فى وضع الإنتاج

بتاريخ 4 دقائق مضت قال ابراهيم حمدى:

أعلم أنه تنبيه فقط ولكن يظهر دائما عند تشغيل المشروع فى وضع الإنتاج

لحل مشكلة التحذيرات، نضيف الكائن performance لإعداد webpack

بالشكل التالي: (إخفاء تنبيهات الأداء -منها حجم الملفات) وزيادة حجم الملفت المقبولة لكي لا تظهر الرسالة مجدداً ل 244 كيلو بايت مثلاً..

حاول إضافة التالي لملف إعداد ويب باك

module.exports = {
  //...
  performance: {
    maxEntrypointSize: 400000,
    maxAssetSize: 100000,
	hints: false,
  },
};

كما نضع stats في dev server ونبطل التحذيرات

devServer: { 
    ...
    stats: { 
		warnings: false
	} 
},

بتاريخ 14 دقائق مضت قال Wael Aljamal:

لحل مشكلة التحذيرات، نضيف الكائن performance لإعداد webpack

بالشكل التالي: (إخفاء تنبيهات الأداء -منها حجم الملفات) وزيادة حجم الملفت المقبولة لكي لا تظهر الرسالة مجدداً ل 244 كيلو بايت مثلاً..

حاول إضافة التالي لملف إعداد ويب باك

module.exports = {
  //...
  performance: {
    maxEntrypointSize: 400000,
    maxAssetSize: 100000,
	hints: false,
  },
};

كما نضع stats في dev server ونبطل التحذيرات

devServer: { 
    ...
    stats: { 
		warnings: false
	} 
},

 

إختفت التحذيرات بالفعل ولكن الملفات العشوائية عادت مرة أخرى

بتاريخ الآن قال ابراهيم حمدى:

إختفت التحذيرات بالفعل ولكن الملفات العشوائية عادت مرة أخرى

الأمر يعتمد على إصدار dev server وما الخواص التي يقبلها (هيكلية كائن JSON)

ابحث عن Stop Hot JS files webpack حسب الإصدار الذي تستعمله..

حاول فلترة الملفات التي تكتب على القرص مثل التالي:

devServer: {
  devMiddleware: {
    writeToDisk: (filePath) => {
      return /^(?!.*(hot)).*/.test(filePath);
    }
  },
},

بحثت ولم أصل الى حل واضفت الأكواد وعدلت فيها ولم يحدث شيئا جديدا

مازالت مشكلة توليد الملفات موجودة

بتاريخ 45 دقائق مضت قال ابراهيم حمدى:

بحثت ولم أصل الى حل واضفت الأكواد وعدلت فيها ولم يحدث شيئا جديدا

مازالت مشكلة توليد الملفات موجودة

يمكننا توجيه كتابة الملفات لمل واحد ضمن مجلد محدد و بالتالي تقل العشوائية مثلاً

output: {
    path: path.join(root, "dist"),
    filename: "bundle.js",
    hotUpdateChunkFilename: 'hot/hot-update.js',
    hotUpdateMainFilename: 'hot/hot-update.json'
}

وحاول استخدام  CleanWebpackPlugin

مع إضافة التالي في مصفوفة plugins

new CleanWebpackPlugin({
    cleanOnceBeforeBuildPatterns: [`${outputPath}/*.hot-update.*`],
    dry: false,
    dangerouslyAllowCleanPatternsOutsideProject: true
}),

ظهر لى هذا الخطأ عندما طبقت الأكواد السابقة

[webpack-cli] ReferenceError: root is not defined

بتاريخ 4 دقائق مضت قال ابراهيم حمدى:

ظهر لى هذا الخطأ عندما طبقت الأكواد السابقة

الخطأ غير واضح، 

حل المشكلة بالأصل هو وضع hot: false 

لا أعلم ما سبب عدم عملها