Pradedančiųjų įvadas į „Webpack“

Kas yra „Webpack“?

„Webpack“ yra įrankis, leidžiantis sudaryti „JavaScript“ modulius. Jis taip pat žinomas kaip modulių paketas.

Atsižvelgiant į didelį failų skaičių, sugeneruojamas vienas failas (arba keli failai), kuriame vykdoma jūsų programa.

Tai gali atlikti daugybę operacijų:

  • padeda surinkti savo išteklius.
  • stebi pokyčius ir pakartotinai vykdo užduotis.
  • gali paleisti „Babel“ transpiliaciją į ES5, leidžiančią naudoti naujausias „JavaScript“ funkcijas, nesijaudinant dėl ​​naršyklės palaikymo.
  • gali perkelti „CoffeeScript“ į „JavaScript“
  • gali konvertuoti įterptus vaizdus į duomenų URI.
  • leidžia naudoti CSS failams reikalauti ().
  • gali paleisti plėtros serverį.
  • gali atlikti karšto modulio pakeitimą.
  • gali padalyti išvesties failus į kelis failus, kad būtų išvengta didžiulio JS failo, kurį reikia įkelti pirmame puslapyje.
  • gali atlikti medžio purtymą.

„Webpack“ neapsiriboja naudojimu priekinėje programoje, bet yra naudingas ir kuriant „backend Node.js“.

Yra daug „Webpack“ pirmtakų ir daug panašumų, ką daro šie įrankiai ir „Webpack“. Pagrindinis skirtumas yra tas, kad šie įrankiai yra žinomi kaip užduočių vykdytojai, o „Webpack“ gimė kaip modulių rinkinys.

„Webpack“ yra labiau orientuotas įrankis. Jums tereikia nurodyti programos įėjimo tašką (tai gali būti net HTML failas su scenarijaus žymėmis), o „Webpack“ analizuoja failus ir susieja juos į vieną „Java“ išvesties failą, kuriame yra viskas, ko reikia programai paleisti.

„Webpack“ diegimas

„Webpack“ gali būti įdiegtas visame pasaulyje arba vietoje kiekvienam projektui.

Visuotinis diegimas

Štai kaip tai įdiegti visame pasaulyje naudojant „Yarn“:

verpalai globaliai pridėti webpack webpack-cli

su npm:

npm i -g webpack webpack-cli

kai tai bus padaryta, jūs turėtumėte mokėti bėgti

„webpack-cli“

Vietinis diegimas

„Webpack“ galima įdiegti ir vietoje. Tai rekomenduojama sąranka, nes „Webpack“ galima atnaujinti kiekvienam projektui ir jūs turite mažiau pasipriešinimo naudodami naujausias funkcijas tik mažam projektui, o ne atnaujindami visus jūsų turimus projektus, kuriuose naudojate „Webpack“.

Su verpalais:

siūlai pridėti webpack webpack-cli -D

su npm:

npm i webpack webpack-cli - išsaugoti-dev

Kai tai bus padaryta, pridėkite tai prie savo paketo.json failo:

{
  // ...
  „scenarijai“: {
    „statyti“: „internetinė pakuotė“
  }
}

Tai atlikę, galite paleisti „Webpack“ rašydami

verpalų statyba

projekto šaknyje.

Internetinės pakuotės konfigūracija

Pagal numatytuosius nustatymus „Webpack“ (pradedant nuo 4 versijos) nereikia jokios konfigūracijos, jei laikysitės šių konvencijų:

  • jūsų programos įėjimo taškas yra ./src/index.js
  • išvestis dedama į ./dist/main.js.
  • „Webpack“ veikia gamybos režimu

Aišku, kai reikia, galite tinkinti kiekvieną „Webpack“. „Webpack“ konfigūracija saugoma faile webpack.config.js, projekto šakniniame aplanke.

Įėjimo taškas

Pagal numatytuosius nustatymus įvesties taškas yra ./src/index.js. Šiame paprastame pavyzdyje kaip pradžios taškas naudojamas ./index.js failas:

module.exports = {
  /*...*/
  įrašas: './index.js'
  /*...*/
}

Išėjimas

Pagal nutylėjimą išvestis sukuriama ./dist/main.js. Šis pavyzdys pateikia išvesties paketą į „app.js“:

module.exports = {
  /*...*/
  išėjimas: {
    kelias: kelias.resolve (__ dirvardis, 'dist'),
    failo vardas: 'app.js'
  }
  /*...*/
}

Naudodami „Webpack“ galite naudoti importavimą arba reikalauti teiginių į „JavaScript“ kodą, kad ne tik įtrauktumėte kitą „JavaScript“, bet ir bet kokį failą (pvz., CSS).

„Webpack“ siekia valdyti visas mūsų priklausomybes, ne tik „JavaScript“, o krautuvai yra vienas iš būdų tai padaryti.

Pvz., Savo kode galite naudoti:

importuoti „style.css“

naudojant šią krautuvo konfigūraciją:

module.exports = {
  /*...*/
  modulis: {
    taisyklės: [
      {testas: /\.css$/, naudokite: 'css-loader'},
    }]
  }
  /*...*/
}

Įprasta išraiška nukreipta į bet kurį CSS failą.

Krautuvas gali turėti šias galimybes:

module.exports = {
  /*...*/
  modulis: {
    taisyklės: [
      {
        testas: /\.css$/,
        naudoti: [
          {
            krautuvas: 'css-loader',
            galimybės: {
              moduliai: tiesa
            }
          }
        ]
      }
    ]
  }
  /*...*/
}

Kiekvienai taisyklei galite reikalauti kelių krautuvų:

module.exports = {
  /*...*/
  modulis: {
    taisyklės: [
      {
        testas: /\.css$/,
        naudoti:
          [
            „stiliaus krautuvas“,
            „css-loader“,
          ]
      }
    ]
  }
  /*...*/
}

Šiame pavyzdyje „css-loader“ aiškina importavimo „style.css“ direktyvą CSS. „style-loader“ yra atsakingas už CSS įšvirkštimą į DOM, naudojant