--- tags: subject --- # React로 시작하는 프론트 개발 4(환경 구축 1, webpack) React로 시작하는 프론트 개발은 필자(seolim)의 경험을 기반으로 작성되며 절대 정답이 아닙니다! 이점을 유념하며 읽기 바랍니다. ### Webpack > webpack is a static module bundler for modern JavaScript application webpack 공식 페이지의 설명이다. 그래서 저게 뭔 소리냐, html에 집어넣을 자바스크립트 파일과 모듈을 하나로 묶어주는 빌드 툴이라는 의미다. html을 작성해 보았다면 아래와 같이 한번쯤은 해봤을 것이다. ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>div_align_vertical</title> <script src="./local_module1.js"></script> <script src="./local_module2.js"></script> <script src="https://web_module.com/module1.js"></script> <script src="https://web_module.com/module2.js"></script> ... </head> <body> ... </body> </html> ``` 기본적으로 html에 javascript파일을 삽입하기 위해선 위와같이 script를 모두 등록해주어야 하며 그 module에서 사용되는 module또한 모두 등록해주어야 한다... 생각만해도 끔찍하지 않은가? 프로젝트의 규모가 커지면 과연 그 과정을 수동으로 하는것이 가능은 한 이야기일까? webpack은 연결된 모든 모듈과 js파일을 하나의 js파일로 통합하여 지정된 template(html)에 삽입하여 준다. 여기에 js뿐만 아니라 설정된 css나 png와 같은 정적파일들도 설정만 해주면 일괄적으로 하나의 js파일로 묶어서 처리할 수 있다.