webpack (1)

Webpack(웹팩)이란 무엇인가

웹팩이란 오픈소스 자바스크립트 모듈 번들러이다.
주로 자바스크립트를 위한 모듈 번들러이지만 HTML, CSS 그리고 이미지까지 변환이 가능하다고 한다.

그럼 Bundler(번들러)는 뭐야?

파일을 묶어주는 도구를 의미한다.
프로젝트 규모가 커질수록 자바스크립트 파일, CSS, 이미지 등 파일이 많아지는데, 이는 서버와의
통신하는 과정이 많아짐을 의미하고, 이것은 자원의 소비로 이어진다.
이러한 문제점을 해결하기 위한 것이 Bundler이고, Webpack은 그 중에서 가장 인기있는 도구이다.

webpack 설치

Node.JS가 설치되어있다는 전제하에 시작한다.
cmd든 vscode를 사용해서 명령어로 npm init을 쳐서 package.json을 생성해주자.
특별히 설정할 것이 없다면 npm init -y를 사용하면 모두 default 값으로 생성된다.
package.json이 생성되었으면 npm install -D webpack webpack-cli로 webpack을 설치해주자.
그리고 폴더 내에 webpack.config.js 파일을 생성한다.
이것만 있으면 webpack 명령어를 어렵게 칠 필요없이 파일에 적힌 원하는 설정대로 bundle 작업이 완료된다.

위 사진은 webpack.config.js의 예시이다. 그러면 이제 webpack.config.js의 양식을 살펴보자.

• mode : mode가 development이면 개발용, production이면 배포용이다. 최적화를 원할 경우 production으로 하자.
• entry : webpack이 파일을 읽기 시작하는 부분. 아무것도 입력하지 않을 시, 경로는 ./src/index.js 이다.
• output : bundle이 완료된 파일이 위치할 경로. 아무것도 입력하지 않을 시, 경로는 ./dist/main.js 이다.
• module : 모듈에 관한 구성을 나타내는 부분.
• rules : 모듈의 규칙을 나타내는 부분. (로더의 구성, 파서 옵션 등)
• test : 확장자를 구분해주는 부분. 웹팩은 해당하는 확장자의 파일만 rules 적용. (정규표현식으로 쓴다.)
• loader : 적용될 로더를 적는 부분.
• options : 로더에 대한 옵션을 적는 부분.
• use : 여러개의 loader와 options를 적용할 때 사용. 사용하는 로더를 명시하는 부분.
• devtools : 브라우저 devtools에 대한 메타 정보를 추가해 디버깅을 향상시킨다. 주로 source- map을 사용한다. 단, 빌드 속도가 느려진다.
• target : bundle이 실행되어야 하는 환경을 적는다.
• resolve : 모듈 요청 해결을 위한 옵션.

..이렇게 webpack을 사용하려했으나, create-react-app을 사용하고 있었다면 이미 우리는 webpack을 사용하고 있었던 것이다. 단지 알아서 처리해주는 빌드도구여서 안 보였을뿐.
단, 실무에서 webpack 설정을 만져야 할 일이 있을 수 있으니까 알아두는 것이 좋다. 양식 정도는 익혀두자. 개인적으로 하는 소규모 프로젝트는 create-react-app을 사용하지 않고 직접 webpack과 babel을 설정해보는 것을 연습해 볼 생각이다. 다음 기회에..