• 0

مراقبة وتتبع التعديلات تلقائياً أثناء عمل webpack dev server

لقد قمت بتنزيل كافة الحزم اللازمة من خلال   npm وتم انشاء ملف dist    ولكن من المفروض ان اي تعديل اقوم به داخل ملفات  src يتم تعديله تلقائيا داخل ملفات index.html ; style.css الموجودة في dist ولكنها لا تتحدث وعند اجراء الامر npm run build لا يوجد اي خطا 

Microsoft Windows [Version 6.1.7601]
Copyright (c) 2009 Microsoft Corporation.  All rights reserved.

C:\coffee>npm run build

> coffee@1.0.0 build C:\coffee
> webpack serve

(node:2528) [DEP_WEBPACK_COMPILATION_OPTIMIZE_CHUNK_ASSETS] DeprecationWarning:
optimizeChunkAssets is deprecated (use Compilation.hooks.processAssets instead a
nd use one of Compilation.PROCESS_ASSETS_STAGE_* as stage option)
(Use `node --trace-deprecation ...` to show where the warning was created)
i ?wds?: Project is running at http://localhost:8080/
i ?wds?: webpack output is served from
i ?wds?: Content not from webpack is served from C:\coffee
i ?wdm?: asset main.js 1.81 MiB [emitted] (name: main)
asset css/style.css 157 KiB [emitted] (name: main)
asset index.html 990 bytes [emitted]
Entrypoint main 1.97 MiB = css/style.css 157 KiB main.js 1.81 MiB
runtime modules 1.25 KiB 6 modules
orphan modules 19.4 KiB [orphan] 1 module
modules by path ./node_modules/@popperjs/core/lib/ 74 KiB 58 modules
modules by path ./node_modules/webpack-dev-server/client/ 20.9 KiB 10 modules
modules by path ./node_modules/html-entities/lib/*.js 61 KiB 5 modules
modules by path ./src/ 315 bytes (javascript) 56 bytes (css/mini-extract) 3 modu
les
modules by path ./node_modules/webpack/hot/ 1.58 KiB 3 modules
modules by path ./node_modules/url/ 37.4 KiB 3 modules
modules by path ./node_modules/querystring/*.js 4.51 KiB 3 modules
modules by path ./node_modules/@laylazi/bootstrap-rtl/dist/css/*.css 50 bytes (j
avascript) 159 KiB (css/mini-extract)
  ./node_modules/@laylazi/bootstrap-rtl/dist/css/bootstrap-rtl.min.css 50 bytes
[built]


	  css ./node_modules/css-loader/dist/cjs.js!./node_modules/@laylazi/bootstrap-rt

	l/dist/css/bootstrap-rtl.min.css 159 KiB [built] [code generated]

	9 modules

	webpack 5.50.0 compiled successfully in 13092 ms

	i ?wdm?: Compiled successfully.

	 


 

تمّ تعديل بواسطة Wael Aljamal
توضيح السؤال

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

إذا كنت تستخدمين الإضافة webpack-dev-server قومي بالتأكد من وجود الخاصية التالية

devServer: {
  writeToDisk: true
}

ذلك في حالة أنه يتم عمل compile بنجاح

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ الآن قال عبدالباسط ابراهيم:

إذا كنت تستخدمين الإضافة webpack-dev-server قومي بالتأكد من وجود الخاصية التالية


devServer: {
  writeToDisk: true
}

ذلك في حالة أنه يتم عمل compile بنجاح

اجل استخدمها 

devServer: {
        contentBase: path.join(__dirname, "/dist"),
        port: 1239,
         writeToDisk: true,
    },

وتم انشاء الملفات وبها ماكان موجود بشكل مقلص ولكن اي شيء جديد لا يتم تحديثه

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 2 ساعات قال Najah Alsaker:

اجل استخدمها 

devServer: {
        contentBase: path.join(__dirname, "/dist"),
        port: 1239,
         writeToDisk: true,
    },

وتم انشاء الملفات وبها ماكان موجود بشكل مقلص ولكن اي شيء جديد لا يتم تحديثه

هل التغييرات التي تجريها يتم تحديثها على المتصفح؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

هذه هي المشكلة ان التغيرات التي اقوم بها لا يتم تحديثها في المتصفح ولا ملف ال Index. HTML الموجود داخل dist

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

تأكدي من وضع هذه الخاصيات ضمن webpack.config : خاصة devServer تأكدي من حرف S كبير

module.exports = {
 
  entry:  {
    app:'./src/index.js'
  },
  
  output: {
    path: path.join(__dirname, "/dist"),
    publicPath: '',
    filename: "main.js"
  },

  mode: "development",

  devServer: {
    contentBase: path.join(__dirname, "/dist"),
    port: 1233,
    overlay: true,//for errors
    writeToDisk: true,
  
  },

وتثبيت الحزم: package.json

html-loader

html-webpack-plugin

webpack-dev-server

مثلا .. ضمن devDependencies 

يمكن مشاركة ملفي الإعادادت فقط، للتأكد منهما

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن