Riješeno: html-webpack-plug

Zadnje ažuriranje: 09/25/2023

Pisanje jako dugog članka o html-webpack-pluginu uključuje dosta tehničkih informacija, ali dat ću sve od sebe da ga razložim korak po korak.

Dodatak HTML webpack pojednostavljuje stvaranje HTML datoteka za posluživanje vaših paketa webpacka. Ovo je posebno korisno za pakete webpackova koji uključuju hash u nazivu datoteke koji mijenja svaku kompilaciju. Možete dopustiti dodatku da za vas generira HTML datoteku, interpolirati hashove za vas i zaraditi.

Sada prijeđimo na rješenje za uobičajeni problem s kojim se možete susresti pri korištenju dodatka HTML webpack.

Zajednički problem

Recimo da želite ubaciti skripte u tijelo ili glavu HTML-a. To prema zadanim postavkama uključuje sve dijelove – ne ono što želimo.

Rješenje problema

Ovdje je temeljna pogrešna pretpostavka da se samo oznake glave i tijela mogu koristiti za ubrizgavanje. Možemo imati više opcija postavljanjem opcije inject u konfiguraciji dodatka HTML webpack.

Sada zaronimo u JavaScript kodiranje kako bismo to ilustrirali na praktičniji način.

new HtmlWebpackPlugin({
  inject: 'body',
  
  // Other configurations...
})

Ovo je jedan od načina da to učinite. Također možete ubaciti skriptu u glavu ovako:

new HtmlWebpackPlugin({
  inject: 'head',
  
  // Other configurations...
})

Korak po korak objašnjenje koda

1. 'inject: tijelo' Time se generirane js datoteke umeću na dno body oznake, u ovom konkretnom slučaju osiguravamo da su sve datoteke učitane kada ih želimo početi koristiti.
2. 'inject: head' To znači da će skripta biti smještena u glavu HTML-a.

U drugim slučajevima ove opcije možda neće biti dovoljne. Na primjer, ako imamo nekoliko ulaznih točaka i želimo postaviti različite skripte na različita mjesta.

Uključene knjižnice ili funkcije

Webpack je skupljač statičkih modula za moderne JavaScript aplikacije. Webpack uzima module s ovisnostima i generira statička sredstva koja predstavljaju te module.

HtmlWebpackPlugin pojednostavljuje stvaranje HTML datoteka za posluživanje vaših webpack paketa. Dodatak HtmlWebpack radi tako da prvo generira HTML datoteku, a zatim ubacuje skripte generirane webpackom u stvorenu HTML datoteku.

  • webpack
  • HtmlWebpackPlugin

Kao što možete vidjeti, na ovom putovanju kroz html-webpack-plugin dotakli smo se raznih aspekata, od razumijevanja njegove osnovne funkcionalnosti, do rješavanja uobičajenih problema, ronjenja u zamršenost koda i isticanja relevantnih biblioteka i uključenih funkcija.

Povezani postovi:

Ostavite komentar