مشكلة في رفع موقع مبني بـ webpack5 على اساضافة netlify

اعتقد أن المشكلة هي أن الامر npm run build يقوم بتشغيل سيرفر webpack وليس عمل build للملفات فقط وبالتالي يبقى الامر npm run build يعمل حتى اللانهاية.

للتوضيح، إن رسالة الخطأ التي تظهر لك تخبرك بأن الامر npm run build قد استغرق أكثر من 35 دقيقة وهو الحد الأقصى للوقت التي تمنحه netlify لعملية الـ build وبالتالي لم تستطع اكمال العملية.

وبالتالي أنت بحاجة لكتابة امر جديد يقوم بعمل build فقط من دون تشغيل سيرفر الـ webpack ولفعل ذلك بحسب توثيقات webpack يجب عليك حذف ملف الـ webpack.config.js واستبداله بثلاث ملفات :

1- webpack.common.js :

يحتوي على الاعدادات الأساسية لـ webpack و هو بالشكل التالي مثلاً :

 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
   entry: {
     app: './src/index.js',
   },
   plugins: [
     new HtmlWebpackPlugin({
       title: 'Production',
     }),
   ],
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
     clean: true,
   },
 };

2- webpack.dev.js :

وهو الملف الذي يحتوي على اعدادات السيرفر التي تحتاجها في مرحلة الـ development وهو بالشكل :

 const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');

 module.exports = merge(common, {
   mode: 'development',
   devtool: 'inline-source-map',
   devServer: {
     static: './dist',
   },
 });

3- webpack.prod.js : 

وهو الملف الذي يحتوي على اعدادات نسخة الـ production من المشروع :

const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');

 module.exports = merge(common, {
   mode: 'production',
 });

و في ملف الـ package.json سنقوم بإعداد الـ scripts بالشكل التالي :

"scripts": {
  "start": "webpack serve --open --config webpack.dev.js",  
  "build": "webpack --config webpack.prod.js"
},

بحيث npm run start ستقوم بتشغيل اصدار الـ development وهو ما تحتاجه لتعمل على المشروع وتعدل عليه.

و npm run build سيقوم بتشغيل اصدار الـ production وهو ما تحتاجه ليعمل المشروع على netlify وغيرها من الاستضافات.

اطلع على : توثيق webpack من الموقع الرسمي