توضیحات

در این جلسه به پکیج dev server در دوره ای آموزش webpack می پردازیم.

دوستان دقت کنید
اگه شما از ورژن ۴ این پکیج استفاده میکنید (توی فایل package.json میتوانید نسخه نصبی پکیج ها را مشاهده کنید) طبق داکیومنت پیشنهاد شده که ورژن webpack برابر یا بزرگتر از ۵.۰.۰ باشه و webpack-cli برابر یا بزرگتر از ۴.۷.۰ و بعد از اون کد مربوط به dev-server را به این شکل به فایل webpack.config.json اضافه کنید:

devServer: {

        static: {

            directory: path.join(__dirname, "./dist"),

          },

          compress: true,

          port: 9000,

    },

و در نهایت مانند ویدیو کلمه server را به script dev توی فایل package.json اضافه کنید.

"dev": "webpack serve --config webpack.dev.config.js"

javascript جاوااسکریپت webpack وب پک ویت جی اس vite.js

مدرس دوره علی شیخ
مدت دوره 06:54:04
تعداد ویدیو 46

وضعیت دوره : کامل شده
قیمت دوره : 149,000 141,000 تومان

نظرات ارزشمند شما:

برای ارسال نظر ابتدا باید وارد سایت شوید

  • سلام وقت بخیر.
    من ورژن webpack-cli:4.2.0وwebpack:5.11.0 و webpack-dev-server:4.8.1 هست کدوم کد رو باید توی فایل webpack.config بنویسم اونی که تو فیلم می گید یا اونی که شات دادین ممنون از دوره ی خوبتون

    • سلام وقت بخیر.
      باید کدی که توی توضیحات دوره گفته شده استفاده کرد.
      بزودی این قسمت و چند قسمت دیگه دوره با توجه به آپدیت webpack، آپدیت میشه که از طریق ایمیل بهتون اطلاع رسانی میشه

  • سلام. وقت بخیر.
    من devServer رو اضافه کردم و طبق داکیومنت از این تنظیم استفاده کردم.

    devServer: {
    
    static: {
    directory: path.join(__dirname, './dist'),
    watch: true,
    },
    port: 9000,
    },


    بقیه موارد رو هم دقیقا مطابق شما انجام دادم.
    وقتی تغییرات رو ذخیره میکنم، روی پروژه اعمال میشه ولی صفحه رفرش نمیشه و باید خودم رفرش کنم.
    مشکل از چیه؟

    ممنونم از پاسخگویی‌تون.
    و ممنون که همیشه خیلی سریع پاسخ میدین.

    • سلام وقت بخیر.
      اگه شما از ورژن 4 این پکیج استفاده میکنید (توی فایل package.json میتونید نسخه نصبی پکیج ها را مشاهده کنید) طبق داکیومنت پیشنهاد شده که ورژن webpack برابر یا بزرگتر از 5.0.0 باشه و webpack-cli برابر یا بزرگتر از 4.7.0 و بعد از اون کد مربوط به dev-server را به فایل webpack.config.json اضافه کنید، که میشه این کد:

      devServer: {
      
      static: {
      directory: path.join(__dirname, "./dist"),
      },
      compress: true,
      port: 9000,
      },

      و در نهایت مانند ویدیو کلمه server را به script dev توی فایل package.json اضافه کنید.
      "dev": "webpack serve --config webpack.dev.config.js"

    • متشکرم.

      ورژن‌ها پکیج‌ها:
      "webpack": "^5.67.0",
      "webpack-cli": "^4.9.2",
      "webpack-dev-server": "^4.7.4"

      تنظیمات هم دقیقا به همون شکلی هست که فرمودین.
      ولی اتوماتیک رفرش نمیشه.

    • ببینید من تست کردم و مشکلی نداشت و راه حل را براتون فرستادم، شاید توی کش گیر کرده، مطمن بشید که اروری ندارید، سیستم را یکبار ریستارت کنید و مرورگر پیش فرض هم تغیر بدید به یک مرورگر دیگه و تست کنید.

    • ممنونم.
      با این کانفیک مشکل حل شد.

      
      
      devServer: {
      static: {
      directory: path.join(__dirname, './src'),
      },
      compress: true,
      port: 9000,
      },

      بجای فولدر dist، فولدر src رو watch میکنه.
      منطقا هم، فکر میکنم درست هست. چون فولدر dist خالیه. و تغییرات هم توی src داره انجام میشه.

    • مجددا سلام. وقت بخیر
      توی جلسه 31 توضیح دادین که وقتی با dev-server اجرا کنیم پروژه رو، فولدر dist خالی میشه. و برای رفع این مشکل باید کد زیر رو توی کانفیک dev-server استفاده کنیم.

      
      writeToDisk: true
      

      ولی این کد واسه من خطای زیر رو میداد.
      options has an unknown property 'writeToDisk'. These properties are valid
      واسه همین از توی تنظیمات برداشتمش و نهایتا چون فایلی توی dist نبود که watch کنه، با ایجاد تغییرات، صفحه رفرش هم نمیشد. واسه همین من تنظیم کردم فولدر src رو watch کنه.
      ولی با کد زیر مشکل خالی بودن پوشه dist حل میشه.
      devMiddleware: {
      
      writeToDisk: true
      },

      و حالا میشه مطابق تنظیم شما فولدر dist رو watch کرد.
      devServer: {
      
      static: {
      directory: path.join(__dirname, './dist'),
      },
      compress: true,
      port: 9000,
      devMiddleware: {
      writeToDisk: true
      },
      },

    • سلام وقت بخیر.
      بسیار عالی، ممنون که برای ما ارسال کردید تا دوستان دیگه هم بتونند استفاده کنند.