Boshlang'ichning veb-paketi bilan tanishtirish

Webpack nima?

Webpack - bu JavaScript modullarini kompilyatsiya qilish imkonini beradigan vositadir. U shuningdek modulli bog'ich sifatida ham tanilgan.

Ko'p sonli fayllarni hisobga olgan holda, u bitta faylni (yoki bir nechta faylni) yaratadi.

U ko'plab operatsiyalarni bajarishi mumkin:

  • resurslaringizni to'plashga yordam beradi.
  • o'zgarishlarni kuzatadi va vazifalarni qayta bajaradi.
  • brauzerni qo'llab-quvvatlashdan xavotirlanmasdan JavaScript-ning so'nggi xususiyatlaridan foydalanishga imkon beradigan ES5-ga Babel transpilyatsiyasini amalga oshirishi mumkin.
  • CoffeeScript-ni JavaScript-ga o'tkazishi mumkin
  • ichki chizilgan rasmlarni ma'lumot URI-lariga o'zgartirishi mumkin.
  • sizga CSS fayllari uchun (() ni ishlatish imkonini beradi.
  • rivojlanish veb-serverini ishlatishi mumkin.
  • modulni almashtirish bilan shug'ullanishi mumkin.
  • birinchi sahifani bosishda yuklab olish uchun juda katta JS fayliga ega bo'lmaslik uchun chiqish fayllarini bir nechta fayllarga ajratishi mumkin.
  • daraxtni silkitishni amalga oshirishi mumkin.

Veb-paket faqat old qismda ishlatilishi bilan cheklanib qolmay, balki Node.js-ni yaratishda ham foydalidir.

Webpack-ning ko'plab o'tmishdoshlari va ushbu vositalar va Webpack-ning bajaradigan ishlarida o'xshashliklar juda ko'p. Asosiy farq shundaki, ushbu vositalar vazifa bajaruvchilari sifatida tanilgan, Webpack esa modul to'plami sifatida paydo bo'lgan.

Veb-paket ko'proq e'tibor qaratilgan vositadir. Siz shunchaki ilovangizga kirish nuqtasini ko'rsatishingiz kerak (hatto skript teglari bilan HTML-fayl ham bo'lishi mumkin) va veb-paket fayllarni tahlil qiladi va ularni bitta JavaScript chiqishi fayliga to'playdi, bu sizga dasturni ishga tushirish uchun kerak bo'lgan hamma narsani o'z ichiga oladi.

Veb-sahifani o'rnatish

Veb-paketlar har bir loyiha uchun global yoki mahalliy ravishda o'rnatilishi mumkin.

Global o'rnatish

Uni butun dunyo bo'ylab ip bilan qanday o'rnatishingiz mumkin:

ip-global global veb-veb-paket veb-paket

npm bilan:

npm i -g veb-paket veb-paket

bu bajarilgandan so'ng, siz yugurish imkoniyatiga ega bo'lishingiz kerak

veb-paket

Mahalliy o'rnatish

Veb-paketni lokal ravishda ham o'rnatish mumkin. Bu tavsiya etilgan sozlashdir, chunki har bir loyihada veb-paket yangilanishi mumkin va siz Webpack-dan foydalangan barcha loyihalarni yangilashdan ko'ra, kichik loyihalar uchun eng so'nggi xususiyatlardan foydalanishga kamroq qarshilik ko'rsatasiz.

Ip bilan:

ip veb-to'plamni qo'shing-cli -D

npm bilan:

npm i veb-paket veb-paket-cli --save-dev

Bu amalga oshirilgandan so'ng, buni pack.json faylingizga qo'shing:

{
  // ...
  "skriptlar": {
    "qurish": "veb-paket"
  }
}

Bu amalga oshirilgandan so'ng, siz veb-paketni terish orqali ishga tushirishingiz mumkin

ip tikish

loyiha ildizida.

Veb-paket konfiguratsiyasi

Odatiy bo'lib, agar siz ushbu konventsiyalarni hurmat qilsangiz, Webpack (4-versiyadan boshlab) hech qanday konfiguratsiyani talab qilmaydi:

  • ilova kirish joyi ./src/index.js
  • chiqish ./dist/main.js ga joylashtirilgan.
  • Veb-sahifa ishlab chiqarish rejimida ishlaydi

Veb-paketning har qanday ozini, kerak bo'lganda, sozlashingiz mumkin. Webpack konfiguratsiyasi webpack.config.js faylida, loyihaning ildiz papkasida saqlanadi.

Kirish joyi

Odatiy bo'lib kirish nuqtasi ./src/index.js Ushbu oddiy misol boshlang'ich nuqtasi sifatida ./index.js faylidan foydalanadi:

modul.exports = {
  /*...*/
  kirish: './index.js'
  /*...*/
}

Chiqish

Odatiy bo'lib, chiqish ./dist/main.js-da yaratiladi. Ushbu misol App.js dasturiga chiqish to'plamini joylashtiradi:

modul.exports = {
  /*...*/
  chiqish: {
    yo'l: path.resolve (__ dirname, "dist"),
    fayl nomi: 'app.js'
  }
  /*...*/
}

Webpack-dan foydalanish sizning JavaScript kodingizda nafaqat boshqa JavaScript-larni, balki har qanday turdagi fayllarni (masalan, CSS-ni) o'z ichiga olgan holda foydalanishga ruxsat beradi yoki talab qiladi.

Veb-sahifa nafaqat JavaScript-ni, balki bizning barcha qaramliklarimizni ham hal qilishga qaratilgan, va yuklovchilar buni amalga oshirishning bir usuli hisoblanadi.

Masalan, kodingizda quyidagilardan foydalanishingiz mumkin:

'style.css' faylini import qilish

ushbu konfiguratsiya yordamida:

modul.exports = {
  /*...*/
  modul: {
    qoidalar: [
      {test: /\.css$/, foydalanish: 'css-loader'},
    }]
  }
  /*...*/
}

Oddiy ibora har qanday CSS fayliga yo'naltirilgan.

Yuk ko'taruvchida quyidagilar bo'lishi mumkin:

modul.exports = {
  /*...*/
  modul: {
    qoidalar: [
      {
        sinov: /\.css$/,
        foydalanish: [
          {
            loader: 'css-loader',
            sozlamalar: {
              modullar: haqiqiy
            }
          }
        ]
      }
    ]
  }
  /*...*/
}

Har bir qoida uchun bir nechta yuklovchilarni talab qilishingiz mumkin:

modul.exports = {
  /*...*/
  modul: {
    qoidalar: [
      {
        sinov: /\.css$/,
        foydalanish:
          [
            "uslub yuklovchi",
            'css-loader',
          ]
      }
    ]
  }
  /*...*/
}

Ushbu misolda, css-loader CSS-da import 'style.css' direktivasini izohlaydi. style-loader, keyin