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

Najah Alsaker · 17 أغسطس 2021

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

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.

تم التعديل في 20 أغسطس 2021 بواسطة Wael Aljamal
توضيح السؤال

عبدالباسط ابراهيم · 17 أغسطس 2021

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

devServer: {
  writeToDisk: true
}

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

Najah Alsaker · 17 أغسطس 2021

بتاريخ الآن قال عبدالباسط ابراهيم:
إذا كنت تستخدمين الإضافة webpack-dev-server قومي بالتأكد من وجود الخاصية التالية
devServer: {
  writeToDisk: true
}
ذلك في حالة أنه يتم عمل compile بنجاح

اجل استخدمها

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

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

عبدالباسط ابراهيم · 17 أغسطس 2021

بتاريخ 2 ساعات قال Najah Alsaker:

اجل استخدمها

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

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

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

Najah Alsaker · 17 أغسطس 2021

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

Najah Alsaker · 18 أغسطس 2021

??

Wael Aljamal · 18 أغسطس 2021

تأكدي من وضع هذه الخاصيات ضمن 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

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

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

السؤال

Najah Alsaker

رابط هذا التعليق

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

6 أجوبة على هذا السؤال

Recommended Posts

عبدالباسط ابراهيم

رابط هذا التعليق

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

Najah Alsaker

رابط هذا التعليق

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

عبدالباسط ابراهيم

رابط هذا التعليق

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

Najah Alsaker

رابط هذا التعليق

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

Najah Alsaker

رابط هذا التعليق

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

Wael Aljamal

رابط هذا التعليق

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

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية