Webpack 5장 (plugin)

KHW·2021년 4월 5일

webpack

다양한 지식쌓기

목록 보기

15/48

Webpack의 2가지 형태의 확장기능

loader : 모듈을 최종적인 output으로 만들어가는 과정에서 사용하는 것

plugin : 그렇게 만들어진 최종적인 것을 변형하는 것 (복잡적, 자유로움)

plugin 사용이유

어떤 대상을 자동으로 생성하고 싶을 때

plugin 사용하기 (html-webpack)

npm install --save-dev html-webpack-plugin 명령어 실행

index.html과 subindex.html을 source로 이동 및 코드 수정

index.html

<html>
<head>
    <meta charset="utf-8"/>

</head>
<body>
    <div id="root"></div>
    <a href="subindex.html">index</a>
</body>
</html>

subindex.html

<html>
<head>
    <meta charset="utf-8"/>

</head>
<body>
    <div id="root"></div>
    <a href="index.html">subindex</a>
</body>
</html>

Webpack.config.js에 plugin 삽입

const HtmlWebpackPlugin = require('html-webpack-plugin'); 코드추가

아래 코드를 추가

npx webpack 명령어 실행

plugins : [
    new HtmlWebpackPlugin({
      template:'./source/index.html',
      filename:'./index.html',
      chunks:['index']
    }),
    new HtmlWebpackPlugin({
      template:'./source/subindex.html',
      filename:'./subindex.html',
      chunks:['subindex']
    })
  ]

webpack.config.js 코드

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

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