Webpack이란?
현재 프론트엔드 애플리케이션 배포를 위해서 가장 많이 사용하는 번들러입니다.
여러개의 파일을 하나의 파일로 합쳐주는 모듈 번들러를 의미합니다.
모듈 번들러란 HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구입니다.
webpack에서의 모듈은 JavaScript의 모듈에만 국한하지 않습니다. HTML, CSS, 혹은 .jpg나 .png 같은 이미지 파일들도 전부 포함한 포괄적인 개념입니다.
번들링은 말 그대로 묶음의 개념입니다. 파일을 묶는 작업 그 자체를 말하며 파일은 의존적 관계에 있는 파일들(import, export) 그 자체 혹은 내부적으로 포함되어 있는 모듈을 의미합니다. 정확히 말하면 모듈 간의 의존성 관계를 파악해 그룹화하는 작업이라고 볼 수 있습니다.
Webpack의 필요성
웹 애플리케이션의 빠른 로딩 속도와 높은 성능을 위해서입니다.
Webpack의 핵심개념
Entry
-번들링을 원하는 파일의 위치
-기본값은 ./src/index.js이다.
Output
-생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 webpack에 알려주는 역할을 합니다.
-번들링의 결과물.
- 기본 출력 파일의 경우에는 ./dist/main.js
-entry 경로 파일에서 필요한 모든 것을 bundler인 webpack을 통해 output 경로의 번들 파일 하나로 모아준다.
Loader
-webpack은 기본적으로 javascript와 json파일만 이해합니다. 그러나 loader를 사용하면 css파일같은걸 처리할수있다.
-javascript, json이 아닌 파일을 불러오는 역할을 한다.
Plugins
-번들링 과정 중에 개발자가 원하는 다양한 작업을 할수 있도록 도와줍니다.
-그중 html-webpack-plugin은 번들링 과정 중 html 파일을 자신이 원하는 형태로 가공하여 번들에 포함할 수 있게 돕습니다.
React에서
React에서는 create-react-app에 포함되어있는 babel이 jsx를 js로 변경해 주어 번들링을 해준다.
babel은 JSX를 javascript로 변경하여 entry에서 불러올 수 있게 만들어줬기 때문에 loader의 일종으로 볼 수 있다.