لماذا إذا قمت بتشغيل أمر البناء لا يتم انشاء خادم في تطبيق webpack؟

الأوامر صحيحة المشكلة في كود webpack لذلك سنقوم بفصل وضع التطوير عن وضع الإنتاج في ملفات منفصلة 

أولاً نحتاج الي تثبيت webpack-merge لربط الملفات ببعض :

npm install --save-dev webpack-merge

وسنقوم بعمل ثلاثة ملفات 

• webpack.common.js وسيحتوي علي الأكواد المشتركة بين الوضعين

   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,
     },
   };

• webpack.dev.js  وضع التطوير 

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

• webpack.prod.js وضع الإنتاج 

   const { merge } = require('webpack-merge');
   const common = require('./webpack.common.js');
  
   module.exports = merge(common, {
     mode: 'production',
   });