Väga pika artikli kirjutamine html-webpack-pluginist sisaldab üsna vähe tehnilist teavet, kuid ma annan endast parima, et see samm-sammult lahti võtta.
HTML-i veebipaketi pistikprogramm lihtsustab HTML-failide loomist, et teenindada teie veebipaketi komplekte. See on eriti kasulik veebipakkide puhul, mille failinimes on räsi, mis muudab iga kompilatsiooni. Saate lasta pistikprogrammil genereerida enda eest HTML-faili, lasta sellel interpoleerida räsi ja tulu teenida.
Vaatame nüüd lahendust tavalisele probleemile, mis võib tekkida HTML-i veebipaketi pistikprogrammi kasutamisel.
Üldine probleem
Oletame, et soovite sisestada skripte HTML-i kehasse või päisesse. See hõlmab vaikimisi kõiki tükke – mitte seda, mida me tahame.
Probleemi lahendus
Siin on põhimõtteline eksiarvamus, et süstimiseks saab kasutada ainult pea- ja kehamärke. Meil on rohkem valikuid, kui määrame HTML-i veebipaketi pistikprogrammi konfiguratsioonis süstimisvaliku.
Sukeldume nüüd JavaScripti kodeerimisse, et seda praktilisemal viisil illustreerida.
new HtmlWebpackPlugin({
inject: 'body',
// Other configurations...
})
See on üks võimalus seda teha. Samuti saate skripti pähe süstida järgmiselt:
new HtmlWebpackPlugin({
inject: 'head',
// Other configurations...
})
Koodi samm-sammult selgitus
1. 'süst: keha' See lisab loodud js-failid kehasildi allossa. Sel juhul tagame, et kõik failid laaditakse, kui tahame neid kasutama hakata.
2. 'süst: pea' See tähendab, et skript paigutatakse HTML-i päisesse.
Muudel juhtudel ei pruugi neist valikutest piisata. Näiteks kui meil on mitu sisenemispunkti ja tahame paigutada erinevaid skripte erinevatesse kohtadesse.
kaasatud raamatukogud või funktsioonid
Webpack on staatiline moodulite komplekt tänapäevaste JavaScripti rakenduste jaoks. Webpack võtab sõltuvustega mooduleid ja genereerib neid mooduleid esindavad staatilised varad.
HtmlWebpackPlugin lihtsustab HTML-failide loomist, et teenindada teie veebipaketi komplekte. HtmlWebpacki pistikprogramm loob esmalt HTML-faili ja seejärel sisestab veebipaketi loodud skriptid loodud HTML-faili.
- Veebipakk
- HtmlWebpackPlugin
Nagu näete, puudutasime sellel teekonnal läbi html-webpack-plugin'i erinevaid aspekte, alustades selle põhifunktsioonide mõistmisest kuni levinud probleemide lahendamiseni, sukeldudes koodi keerukuseni ning tõstes esile asjassepuutuvaid teeke ja funktsioone.
