Webpack හි ඔබේම ලේඅවුට් ගොනුව

ප්‍රායෝගිකව සාමාන්‍යයෙන් අපට දැනටමත් අපගේම වෙබ් අඩවියේ HTML ලේඅවුට් එකක් ඇත. මෙම අවස්ථාවේදී, Webpack අපේ ලේඅවුට් එක ගන්නා ලෙසත්, එහිම එකක් ජනනය නොකරන ලෙසත් අපට අවශ්‍යය. මෙය කරන ආකාරය බලමු.

අපට පහත ලේඅවුට් එක ඇතැයි සිතමු:

src/index.html<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>මගේ ලේඅවුට්</title>
  </head>
  <body>
    
  </body>
</html>

Webpack අපේ ලේඅවුට් ගන්නා ලෙස පවරමු. මේ සඳහා එය පහත සැකසුමේ ලියන්න:

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

එහි ප්‍රතිඵලයක් ලෙස, එකතු කිරීමෙන් පසු dist ෆෝල්ඩරයේ අපගේ ලේඅවුට් ඇති අතර එහි සියලුම බන්ඩල ස්වයංක්‍රීයව සම්බන්ධ කර ඇත:

dist/index.html<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>මගේ ලේඅවුට්</title>
    
    <script defer src="main.js"></script>
  </head>
  <body>
    
  </body>
</html>