Intro.
꽤 오래전에 웹팩에 대해 공부했었는데, 근래 CRA로 만든 프로젝트 내부 웹팩 설정을 바꿀일이 있어 개복했다가, 그 난해함에 다시한번 공부하고 기록하고 싶어서 글을 쓰게 되었습니다. 근래에는 Vite로 번들러를 바꾸고있긴한데, 아직까지 대다수의 프로젝트가 웹팩을 번들러로 사용하고 있고, 지원하는 기능들은 대부분 비슷하다 생각하기에, 해당 주제로 글을 쓰려합니다.
Why Bundler?
번들러 사용 이전의 웹 개발에선 크게 3가지 문제가 있었습니다.
- 속도: 많은 양의 스크립트 로딩이 곧 네트워크 병목으로 이어짐
- 의존성 : 각 스크립트들의 의존성을 수동으로 관리해야함. 즉, B파일이 A파일에 의존한다면, 스크립트 배열 순서를 A, B 이런식으로 순서대로 나열해야함
- 스코프: 각 파일의 루트 단에서 선언된 변수들의 경우, 동일한 전역 컨텍스트에서 실행되기에 스코프 충돌이 일어남.
/* scope collision */
<html>
...
<body>
<script>
const name = 'dovigod';
</script>
<script>
const name ='dovi' //error variable name collision.
</script>
</body>
</html>/* dependency */
<html>
...
<body>
<script type="inline-module" id='A'>
import {greeting} from '#A'
greeting() //error
</script>
<script type="inline-module" id='B'>
export function greeting(){ console.log('hello')};
</script>
</body>
</html>/* network bottle-neck */
<html>
...
<body>
<script src='a'/>
<script src='b'/>
<script src='c'/>
<script src='d'/>
<script src='e'/>
<script src='f'/>
<script src='g'/>
<script src='h'/>
<script src='i'/>
...
</body>
</html>
Why Webpack?
- Bundling : 기본적으로 하나의 파일로 모듈들을 번들링 해줍니다. 필요의 따라 code splitting을 통해, 청크 단위로 나눌수 있습니다. 또한 기본적으로 모듈 번들링이기 때문에, naming conflict에 대해 걱정할 필요가 없습니다. (모듈 내부에서 정의한 변수들은 외부에서 접근 불가)
- Assets : 스크립트 뿐만아니라 , css를 비롯한 각종 asset들에 대한 처리도 지원합니다.
- Optimization : gzip , code splitting , minification등 사이즈 최적화를 위한 도구들을 제공합니다.
- Feature Flagging: 피쳐 플래깅 지원을 통해 테스팅에 도움
- etc...
'Bundler' 카테고리의 다른 글
| [Webpack] 빌드 시 하위 경로 생성하기 (0) | 2023.04.24 |
|---|---|
| [Webpack] 동적으로 HTML 생성하기 (HTMLWebpackPlugin) (0) | 2023.04.24 |
| [Webpack] CSS 파일 메인 번들과 분리시키기 (MiniCssExtractPlugin) (0) | 2023.04.24 |
| [Webpack] CSS 번들링하기 (0) | 2023.04.23 |
| [Webpack] 기초적인 개발용 환경 구성하기 (0) | 2023.04.23 |
