[REACT] bundling & webpack

번들링

• 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위를 의미
• 개발자에게 번들링은 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음을 의미

장점

• 두 개의 .js 파일에서 같은 변수를 사용할 때 충돌을 방지해준다.
• 코드의 용량을 최적화하여 인터넷 환경이 좋지 않아도 빠르게 코드를 불러온다.
• 작성한 코드를 이용하여 새로운 배포 파일을 만들어준다.

---

webpack

• Webpack이란 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러다.
• 모듈 번들러란 HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구이다.

사용법

• webpack의 config파일을 만들어 속성을 설정해야한다.
• 속성 값으로는 Entry Output Loaders Plugins 등이 있다.

1. Entry : 코드의 “시작점"을 의미. 여러개의 entry point를 지정할 수 있다.
2. Output : 생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 속성키다.
   path속성을 사용할 때는 path 모듈을 사용해야한다.
3. Loaders : webpack은 기본적으로 자바스크립트와 JSON 파일만 이해한다. 보편적으로 css를 번들링에 포함시키기 위해 쓰는 듯 하다. 여기서 test와 use 속성은 필수 속성이다. 또 exclude 속성값으로 node_modules를 제외해야한다.
4. Plugins : Plugins를 사용하면 번들을 최적화하거나 에셋을 관리하고, 또는 환경변수 주입 등의 광범위한 작업을 수행할 수 있다. 대표적으로 html-webpack-plugin 를 사용하여 생성된 모든 번들을 자동으로 삽입하여 애플리케이션용 HTML 파일을 생성해준다.