Faili Yako Mwonekano katika Webpack

Kwa vitendo kawaida tayari tunayo mwonekano wetu wa HTML wa tovuti. Katika kesi hii tunahitaji, Webpack ichukue mwonekano wetu, wala si kutengeneza yake mwenyewe. Hebu tuone jinsi hii inafanyika.

Tuchukulie tuna mwonekano ufuatao:

src/index.html<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mwonekano Wangu</title>
  </head>
  <body>
    
  </body>
</html>

Tutilazimishe Webpack ichukue mwonekano wetu. Ili kufanya hivyo, tuiandike katika mpangilio ufuatao:

webpack.config.jsexport default {
  entry: './src/index.js',
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
};

Kama matokeo baada ya kusanyiza folda dist kutakuwa na mwonekano wetu na ndani yake kiotomatiki zitakuwa zimeunganishwa mafungu yote:

dist/index.html<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mwonekano Wangu</title>
    
    <script defer src="main.js"></script>
  </head>
  <body>
    
  </body>
</html>