1. Output

여러개의 entry 파일을 한번에 output 하고 싶을때
Output가이드

1. entry안에 이름을 붙여서 각각 지정해준다.

entry: {
    index: "./source/index.js",
    about: "./source/about.js",
  },

2. output에는 각 이름이 들어갈 수 있는 함수를 넣어준다.

output: {
    path: path.resolve(__dirname, "public"),
    filename: "[name]_bundle.js",
  },

3. npx webpack >> 각 파일이 번들링 된것을 볼 수 있다.

2. Plug In

loader는 가지고있는 모듈들을 최종적인 output으로 만들어가는 과정에서 사용

규정되어있는 형태

plugin은 만들어진 최종결과물(output)을 변형하는것

복합적+자유로운 형태
PlugIn가이드

2-1 HtmlWebpackPlugin

여러 html 파일들을 탬플릿화 시키고 싶거나,
의존성을 가지고 있는 js파일들을 직접 삽입시켜주고 있으니
html파일들을 자동으로 만들어 주고 싶거나,
사용하는 plugin

<!--설치-->
npm install -D html-webpack-plugin

<!--webpack.config.js파일에 삽입-->
plugins: [new HtmlWebpackPlugin()],

<!--plugins 안에 인자값 넣어줘야함 Options참고-->
plugins: [
new HtmlWebpackPlugin({
  template: "./source/index.html",
  filename: "./index.html",
}),],

<!--"chunks" 활용 Options참고-->
plugins: [
new HtmlWebpackPlugin({
  template: "./source/index.html",
  filename: "./index.html",
  chunks: ["index"],
}),
new HtmlWebpackPlugin({
  template: "./source/about.html",
  filename: "./about.html",
  chunks: ["about"],
}),],

<!--기존 public디렉토리에 있는 파일 지우고 새로 생성(Mac)-->
rm ./public/*.*; npx webpack

<!--꿀팁 : 변경사항있을때 감지하면서 자동으로 컴파일 해줌-->
npx webpack --watch

출처: 생활코딩