Webpack은 한마디로 번들링과 컴파일을 결합하는 “정적 모듈 번들러"이다.
웹팩은 웹에서 사용되는 모든 자원(assets)을 번들링 해주는 도구이며 번들링의 개념은 여러 개의 파일 중에 종속성이 존재하는 파일을 하나의 파일로 묶어 패키징을 시키는 과정을 의미한다.
Webpack이란
Webpack이 왜 필요한가
점점 개발자가 작성하는 언어와 방법 종류는 브라우저들이 이해하기 벅찰 속도로 증가되었다.
이러한 상황 대처를 위하여 생겨난 것 중의 하나가 – “번들러”이다.
번들링을 함으로써 파일은 하나로 합쳐지고 네트워킹 요청횟수는 줄어들게 된다. 그리고 중복된 소스코드도 최소화하고 모듈 개념을 사용하기 때문에 글로벌이 오염되지도 않는다.
그리고 웹팩을 사용하면 자바스크립트 간의 종속성 뿐만 아니라 자바스크립트 내에서 필요한 css나 img와 같은 파일(.css, .jpg)도 번들링 해서 하나의 파일로 합쳐줘서 네트워크 요청을 최소화시킬 수 있다.
Webpack의 장단점
단점
- 비교적 복잡한 configuration
- 개발 모드 속도 (프로젝트가 크면 클수록; 하지만 이점은 Webpack 5에 새로 추가된 caching 옵션을 통해 개선되었다고 본다)
- Webpack의 번들 크기
장점
성능 최적화 & 자동화
코드 축소와 더불어 사용하지 않는 코드를 제거하는 tree shaking과 같은 최적화를 수행 함으로써 HTTP 요청 수를 감소하여 웹사이트 성능을 궁극적으로 향상한다.
번들러가 제공하는 편의성
CSS가 아닌 Sass나 Stylus 등을 사용할 경우, 또는 TypeScript 사용 시 번들러가 컴파일 과정에서 필요한 플러그인을 추가하고 번들러를 실행해준다.
Code splitting을 통해 “Load what you need, when you need (필요할 때만 필요한 스크립트를 로드)” 옵션
Code splitting을 통해 원하는 때에 시시 적절히 모듈을 로딩할 수 있는 Dynamic Loading & Lazy Loading 이 가능하다.
Dependency Issue(종속성 문제) 해결
이 외에 최신 버전인 Webpack 5의 가장 큰 새로운 기능으로써는 주목할만한 “Module Federation(모듈 연합)”과 캐싱 개선 등이 있다.
또 한 편의 이점은 웹팩을 사용함으로써 개발자가 개발 작업의 빌드 시스템을 완전히 컨트롤할 수 있다는 점과 이것을 통해 모던 프론트엔드 웹 개발 생태계를 더욱 잘 이해할 수 있다는 점이 있다.
Webpack의 사용방법
설치
웹팩은 노드 모듈 중에 하나이다. 그렇기 때문에 기본적으로 Node.js 가 설치되어있어야 한다.
노드 js가 설치되어 있다면 webpack을 설치해 주면 된다.
npm i webpack webpack-cli webpack-dev-server -D위 명령어가 Webpack install의 가장 간소한 핵심이다.
Config 파일 조정
configuration 조정은 두 군데에서 할 수 있다: package.json & webpack.config.js
package.json
"scripts": {
"build": "webpack",
"dev": "webpack serve"
},
webpack.config.js
Webpack.config.js 파일을 root 디렉토리에 만들고 설정 시작한다. 웹팩 설정에는 보통 다음과 같은 핵심 요소들이 있다.
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'src', 'index.js'),
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}entry로 지정된 파일을 읽어 들이기 시작하며 import 혹은 require 등 다른 파일을 불러오고 있는 파일들을 추적해서 하나의 파일로 만들어준다.
번들링 된 파일은 output에 설정한 대로 파일이 생성되어진다.
그렇다면 웹팩 설정에서 의 핵심 요소들에 대해 자세히 알아보자
Entry
웹팩을 실행할 대상 파일, 그 진입점과 경로 정의. 보통 웹 애플리케이션의 전반적인 구조와 내용이 들어있어 있는 메인 JS 파일을 지정한다.
유형: single이나 array
Output
웹팩을 실행 후 결과물의 파일 경로 — filename과 path 설정한다.
Loader
loader는 특정 파일을 해석하고 변환하는 작업 담당이다. 즉 HTML, CSS, 이미지나, font 같은 asset 파일들을 웹팩이 인식하고 할 수 있도록 해주는 것을 loader가 맡아서 해준다. 각 객체에는 적어도 2개의 속성을 입력한다:
- test: 로더를 적용할 “파일 유형” (CSS, JS.. 등등)
- use: 로더 이름
참고로, 다수의 로더를 적용해야 할 때는 적용 법칙이 오른쪽에서 -> 왼쪽 순인 관계로, 로더 나열의 “순서”에 주의해야 한다. (위의 예를 보자면, ‘sass-loader’, ‘css-loader’, ‘styles-loader’ 순으로 적용되니, 올바르게 나열되어 있다.)
많이 쓰이는 로더 종류와 인스톨 방법
- files: npm install file-loader -D
- CSS: npm i css-loader -D
- SASS: npm i sass-loader sass -D
- Babel: npm install babel-loader @babel/core @babel/preset-env -D
- TypeScript: npm i typescript ts-loader -D
Plugins
웹팩 실행 시 원하는 추가적인 기능을 추가할 수 있는 옵션이다.
자주 사용하는 플러그인
devServer와 devtool 그리고 mode(웹팩 실행 모드)
devServer: 프록시(Proxy) 등 설정
devtool
소스 맵(Source Map)
성능 최적화를 위해 HTML, CSS, JS와 같은 웹 자원들을 압축하여 배포하는 관계로, 배포 후 에러 생성 시 디버깅이 힘들다. 이 문제의 도움을 주는 것이 Source Map이다. Source Map을 사용함으로써 배포된 빌드 파일과 원본 파일을 연결 추적이 가능하다.
Mode
웹팩 실행 모드에는 세 가지 종류가 있다: none, development, production
기본 값을 지정해주지 않을 경우 default로 production모드로 지정되는데, 각 모드에 따라 웹팩 실행 결과물이 달라지게 설정할 수 있는 기능이 핵심이다.
- development: 말 그대로 개발 모드
- production: 배포 모드; 성능 최적화를 위해 기본적인 파일 압축 등의 빌드 과정이 추가된다.
'개발 > javascript' 카테고리의 다른 글
| npm, yarn, pnpm 비교 (0) | 2024.03.22 |
|---|---|
| Defer와 Async의 차이점 (0) | 2024.02.28 |
