안녕하세요!
오늘은 webpack 살펴보기 - (1) 정의와 사용하는 이유를 살펴보겠습니다.
웹팩(webpack)은 여러개 파일을 하나의 파일로 합쳐주는 번들러(bundler)입니다. 하나의 시작점(entry point)으로부터 의존적인 모듈을 전부 찾아내서 하나의 결과물을 만들어 냅니다.
webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
webpack.js.org
webpack은 현재 많은 개발자들 사이에서 번들링 파일을 만드는 데 인기있는 번들러(bundler)입니다.
webpack의 공식 사이트에 나와있는 사진을 참고하겠습니다.
아래의 사진은 많은 내용을 포함하고 있습니다.
즉, webpack이 없던 시절에는 js, sass 파일을 각 파일로 분리해서 서버에 올렸기 때문에 서버에 많은 파일의 요청을 request 해야했고,
그만큼 요청이 많이 필요하였습니다.
하지만 webpack을 이용하면 각각의 파일(js, css, image)를 하나의 파일로 번들링해줘서 만들어주기 때문에 네트워크 요청이 상대적으로 적게 발생하게 됩니다.
webpack에 필요한 패키지는 다음과 같습니다.
npm install -D webpack webpack-cli
오늘은 간단하게 webpack이 어떤 것이고 왜 사용하고, 설치 패키지를 알아보았습니다.
다음 시간에는 webpack 살펴보기 - (2) webpack의 구성 요소를 살펴보겠습니다.
참고 링크
https://jeonghwan-kim.github.io/series/2019/12/10/frontend-dev-env-webpack-basic.html
프론트엔드 개발환경의 이해: 웹팩(기본)
1. 배경 먼저 모듈에 대해 이야기 해보자. 문법 수준에서 모듈을 지원하기 시작한 것은 ES2015부터다. import/export 구문이 없었던 모듈 이전 상황을 살펴보는 것이 웹팩 등장 배경을 설명하는데 수월
jeonghwan-kim.github.io
https://www.youtube.com/watch?v=pzHMT9Jxce0&t=371s
webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
webpack.js.org
'자바스크립트' 카테고리의 다른 글
| 프론트엔드 - webpack 설정하기 (0) | 2021.09.04 |
|---|---|
| 프론트엔드 - Babel을 이해하고 적용해보자!(트랜스파일러) (0) | 2021.09.01 |
| 자바스크립트 - 빌트인 객체(표준 빌트인 객체, 원시 값, 래퍼 객체, 전역 객체) (0) | 2021.08.26 |
| 자바스크립트(JavaScript) - 정규표현식 (0) | 2021.07.24 |
| 자바스크립트(JavaScript) - 객체와 객체 리터럴 (0) | 2021.06.24 |
