Bundling

'묶는다'는 뜻.

기능별로 모듈화 했던 파일들을 하나로 묶어주는 작업을 말한다.

Bundler

여러 개의 파일을 묶어주는 도구.

Webpack, Borserify, Parcel 등이 있음

---

webpack이란?

여러개 파일을 하나의 파일로 합쳐주는 모듈 번들러
웹팩에 대한 개념을 잡기 위해서는 우선 모듈 번들러(Module Bundler)가 무엇인지 알아야 한다.

Module

프로그램을 구성하는 구성 요소의 일부
관련된 데이터와 함수들이 묶여서 모듈을 형성하고 파일 단위로 나뉘는 것이 일반적이다.
모듈화 프로그래밍은 기능별로 파일을 나눠가며 프로그래밍을 하는 것으로 유지보수가 쉽다는 장점이 있다.

Bundler

번들러는 지정한 단위로 파일들을 하나로 만들어서 요청에 대한 응답으로 전달할 수 있는 환경을 만들어주는 역할을 한다.
번들러를 사용하면 소스 코드를 모듈별로 작성할 수 있고 모듈간 또는 외부 라이브러리의 의존성도 쉽게 관리할 수 있다.

Webpack

웹팩(Webpack)은 자바스크립트 정적 모듈 번들러(Static Module Bundler)이다
웹팩에서 모든 것은 모듈이다. 자바스크립트, 스타일시트, 이미지 등 모든 것을 자바스크립트 모듈로 로딩해서 사용한다.
웹팩의 주요 네 가지 개념으로 Entry, Output, Loader, Plugin이 있다.
1. entry
의존성 그래프의 시작점을 웹팩에서는 엔트리(Entry)라고 한다.
웹팩은 엔트리를 통해서 필요한 모듈을 로딩하고 하나의 파일로 묶는다.
여러개의 엔트리가 존재할 수 있다.
2. Output
엔트리에 설정한 자바스크립트 파일을 시작으로 하나로 묶는다. 그후 번들된 결과물을 처리할 위치를 output에 기록한다.
3/ Loader (모듈)
웹팩은 오직 JavaScript와 Json만 이해할 수 있다.
로더는 다른 Type의 파일(img, font, stylesheet 등)을 웹팩이 이해하고 처리 가능한 모듈로 변환 시키는 작업을 한다.
4. Plugin (기타)
로더가 파일단위로 처리하는 반면 플러그인은 번들된 결과물을 처리한다.
로더가 변환하는 동안 플러그인은 bundle optimization, asset management and injection of environment과 같은 일을 진행할 수 있다.

---

npm init -y

npm i -D webpack webpack-cli webpack-dev-server@next

webpack cli와 major 버전을 일치시켜줘야 하기 때문에 뒷쪽에 @next 를 붙여야 한다.

package.json 파일을 열어 scripts: test 라고 써져 있는 것을

scripts : {"dev":"webpack-dev-server --mode development",
"build":"webpack --mode production"
}

현재가 개발 모드라는 것을 명시시킨다.
그리고 아래의

  "devDependencies": {
    "webpack": "^5.74.0", //번들러가 동작하기 위한 핵심적 패키지
    "webpack-cli": "^4.10.0", // cli를 지원
    "webpack-dev-server": "^4.0.0-rc.1" //dev명령을 통해 개발할 때 바로바로 새로고침을 가능하게 해줌.
  }

parcel은 그냥 구성옵션 없이 지원해줬다면 webpack은 지정해줘야함.
webpack.config.js 의 이름을 가진 파일을 생성한다.
직접적인 구성 옵션을 일일히 지정해줘야 하는 단점이 있지만 그만큼 세세하게 지정이 가능하다.
따라서 작은 프로젝트 보다는 규모 있는 프로젝트에 용이.

webpack.config.js 는 기본적으로 node.js 환경에서 동작한다.

//import
const path = require("path");

//export
module.exports = {
  //파일을 읽어들이기 시작하는 진입점 설정
  entry: "./js/main.js", //js를 진입점으로 사용함. parcel이 html인 것과 차이가 있음

  //결과물(번들)을 반환하는 설정
  output: {
    path: path.resolve(__dirname, "dist"), //__dirname은 node.js 의 전역변수 이름. 절대 경로로 표시해야함
    filename: "main.js",
    //결과를 만들 때 dist 를 지우고 다시 만들어줘~
    clean: true,
  },
};

npm i -D html-webpack-plugin

명령어를 사용하여 html을 웹에서 확인할 수 있도록 한다.

const HtmlPlugin = require("html-webpack-plugin");

가장 윗 줄에 위 코드를 넣어주고

 plugins: [
    new HtmlPlugin({
      template: "./index.html",
    }),
  ],

도 넣어준다.
터미널에서 npm run build로 확인해준다.
plugins == 외부의 기능을 붙여줌.

json 파일 안에서는 주석이라는 것이 없다.
_를 붙인다거나 해서 편법으로 주석을 남긴다.