Oma paigutuse fail Webpackis

Praktikas on meil tavaliselt juba olemas oma veebisaidi HTML paigutus. Sel juhul peame Webpacki kasutama meie paigutust, mitte genereerima oma. Vaatame, kuidas seda tehakse.

Oletame, et meil on järgmine paigutus:

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

Paneme Webpacki võtma meie paigutuse. Selleks määrame selle järgmises seadistuses:

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

Tulemusena on pärast kokkupakkimist kaustas dist meie paigutus ja selles on automaatselt ühendatud kõik bundlid:

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