웹팩에는 두 가지 형태의 확장기능이 있다.
1) loader : 가지고 있는 asset을 최종 output으로 만드는 과정에서 사용됨
2) plugin : 최종 결과물을 변환한다. loader보다 더 복합적이며, 더 자유로운 일을 많이 할 수 있다.

플러그인은 플러그인마다 사용방법이 제각각 다르다.

예제로 사용할 플러그인은 HtmlWebpackPlugin

Installation

npm install --save-dev html-webpack-plugin

사용하기

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
    mode:"development",
    entry:{
        index: "./source/index.js",
        about: "./source/about.js"
    },
    output:{
        path:path.resolve(__dirname, "public"),
        filename:'[name]_bundle.js'
    },
    module: {
        rules: [
          {
            test: /\.css$/i,
            use: ['style-loader', 'css-loader'],
          },
        ],
      },
      plugins: [
        new HtmlWebpackPlugin({
          template:'./source/index.html',
          filename:'./index.html',
          chunks:['index']
      }),
        new HtmlWebpackPlugin({
          template:'./source/about.html',
          filename:'./about.html',
          chunks:['about']
  })
    ],
};

✨참고
1) https://webpack.kr/plugins/
2) https://webpack.kr/plugins/html-webpack-plugin
3) https://github.com/jantimon/html-webpack-plugin
4) https://www.youtube.com/watch?v=FlpRJ9iXYZg&list=PLuHgQVnccGMChcT9IKopFDoAIoTA-03DA&index=8