المشروع يقوم بعمل تحديث تلقائي عند تشغيله بوضع production مع استخدام webpack

ظهرت رسالة الخطأ التالية:

Html Webpack Plugin:
  Error: html-webpack-plugin could not minify the generated output.
  In production mode the html minifcation is enabled by default.
  If you are not generating a valid html output please disable it manually.
  You can do so by adding the following setting to your HtmlWebpackPlugin config:
  |
  |    minify: false
  |
  See https://github.com/jantimon/html-webpack-plugin#options for details.
  For parser dedicated bugs please create an issue here:
  https://danielruf.github.io/html-minifier-terser/
  Parse Error: 
 

وسببها أن هنالك جزء من HTML غير مكتوب بطريقة صحيحة تماماً (هو صحيح لكن ليس 100%)

وهو في السطر blog.html 87 :

ModuleError: Module Error (from ./node_modules/html-loader/dist/cjs.js):
    Parse Error: <div class="card mb-3" ">
      
      
<div class="card mb-3" ">
                      ^^^  خطأ
      
<div class="card mb-3">  الصحيح

عندها يعمل build بشكل صحيح.

ظهرت تنبيهات بشأن الأداء وحجم الصور، يمكنك تقليل حجم الصور و ضغطهم، ثم استخدام الصورة المضغوطة أو إبطال التحقق من ذلك بإضافة performance مع الخصائص التالية 

module.exports = {

  performance: {
    hints: false,
    maxEntrypointSize: 512000,
    maxAssetSize: 512000,
  },

ثم أصبح npm run build يعمل بشكل سليم.

• يمكنك نشر السؤال أسفل الدرس في حال كنت تدرسه وليس مشروع امتحان