Ang pagsulat ng isang napakahabang artikulo tungkol sa html-webpack-plugin ay nagsasangkot ng kaunting teknikal na impormasyon, ngunit gagawin ko ang lahat ng aking makakaya upang hatiin ito sa isang hakbang-hakbang na paraan.
Pinapasimple ng HTML webpack plugin ang paggawa ng mga HTML file upang maihatid ang iyong mga webpack bundle. Ito ay lalong kapaki-pakinabang para sa mga webpack bundle na may kasamang hash sa filename na nagbabago sa bawat compilation. Maaari mong hayaan ang plugin na bumuo ng isang HTML file para sa iyo, i-interpolate ang mga hash para sa iyo, at kumita.
Ngayon, talakayin natin ang solusyon sa isang karaniwang problemang maaaring makaharap mo kapag gumagamit ng HTML webpack plugin.
Karaniwang Suliranin
Sabihin nating gusto mong mag-inject ng mga script sa katawan o ulo ng HTML. Kabilang dito ang lahat ng chunks bilang default – hindi ang gusto namin.
Solusyon sa problema
Narito ang isang pangunahing maling palagay na ang mga tag ng ulo at katawan lamang ang maaaring gamitin para sa iniksyon. Maaari tayong magkaroon ng higit pang mga opsyon sa pamamagitan ng pagtatakda ng opsyon sa pag-inject sa configuration ng HTML webpack plugin.
Ngayon, sumisid tayo sa ilang JavaScript coding upang ilarawan ito sa mas praktikal na paraan.
new HtmlWebpackPlugin({
inject: 'body',
// Other configurations...
})
Ito ay isang paraan upang gawin ito. Maaari mo ring ipasok ang script sa ulo tulad nito:
new HtmlWebpackPlugin({
inject: 'head',
// Other configurations...
})
Step-By-Step na Pagpapaliwanag ng Code
1. 'iniksyon: katawan' Ipinapasok nito ang mga nabuong js file sa ibaba ng body tag sa partikular na sitwasyong ito, tinitiyak namin na ang lahat ng mga file ay na-load kapag gusto naming simulan ang paggamit ng mga ito.
2. 'iniksyon: ulo' Nangangahulugan ito na ang script ay ilalagay sa ulo ng HTML.
Sa ibang mga kaso, maaaring hindi sapat ang mga opsyong ito. Halimbawa, kung mayroon kaming ilang entry point at gustong maglagay ng iba't ibang script sa iba't ibang lugar.
