웹팩이란
웹팩은 모듈 번들러 입니다.
entry point, 즉 진입파일을 명시해주고 이 진입 파일로 부터 필요한 모듈들을 모두 긁어모아 하나의 파일로 만들어 줍니다.
클라이언트에서는 여러 파일을 요청하지 않고 하나의 파일만 요청함으로써 어플리케이션을 활성화 시킬수 있습니다.
웹팩은 js파일만 인식하고 다룰수 있습니다.
다른 형식의 파일을 load해야할때는 loader를 추가해주어야 합니다.
그래서 html, css, img 등을 처리할때는 각각의 loader를 추가해주어야 합니다.
이 loader들은 비js 파일들을 웹팩내에서 다룰수 있게 해줍니다.
minify, ugilify등을 수행하기 위해서는 terserPlugin과 같은 여러 plugin도 추가할 수 있습니다.
플러그인은 웹팩으로 변환한 파일에 추가적인 기능을 수행하고자 할때 사용합니다.
어플리케이션 내에서 사용하는 외부 라이브러리들이 esm 방식을 이용한다면 사용하지 않는 함수는 번들링 하지 않는 트리쉐이킹이 가능합니다.
code splitting을 적용하면 결과물이 여러 js파일들로 나뉘어지게 됩니다.
처음에 사용하지 않는 모듈들은 나중에 불러오는 것과 같이 추후에 사용이 되어지는 모듈들은 별도의 번들링 된 js 파일로 생성할 수 있습니다.
두 방식 다 하나의 결과물이 너무 커져 클라이언트에서 네트워크의 상황으로 인한 버그 및 에러를 예방할 수 있습니다
모듈이란
모듈이란 하나의 파일 혹은 함수로 존재하며 각각의 기능을 가질 수 있습니다.
이러한 모듈이 모여 하나의 큰 기능을 수행하고
이전에 쓰였던 모듈들이 다른곳에서 다른 모듈들과 모여 이전과 다른 큰 기능을 수행할 수 있습니다.
이러한 행태가 가구에 적용된 것이 모듈 가구라 생각합니다.
https://www.smlounge.co.kr/living/article/46702
요즘 인기, 모듈 가구
규격화된 부품을 조립해 개인에게 꼭 맞는 형태를 만드는 모듈러 시스템. 취향 존중의 시대, 지속 가능성에 대해 고민하는 요즘 화두에 꼭 맞는 가장 주목받는 가구 형태다.
www.smlounge.co.kr
웹팩이 등장한 이유 웹팩 사용 시에 장점
이러한 웹팩을 이용하면 아래의 문제점들을 해결할 수 있습니다.
1. http/1.x에서의 tcp/ip 연결제한(대부분의 브라우저는 6개까지)으로 인한 파일요청 delay
2. 자바스크립트의 변수 유효 범위
3. 사용하지 않는 코드 관리
1. http/1.x 프로토콜에서는 브라우저에서 tcp/ip 연결에 제한이 걸립니다. 요청별로 스레드를 생성해서 날려도 6개 이상부터는 idle 상태 즉 사용되지 않는 상태가 됩니다. 하나의 화면에서 여러개의 http 요청을 해야한다면 모든 파일이 로드되는 대는 그만큼 delay가 생길수 밖에 없습니다. => 웹팩은 아웃풋 파일을 1개 부터 그 이상 커스텀할수 있어 이러한 브라우저의 제한된 연결을 피해갈 수 있습니다.
2. 자바스크립트의 변수는 기본적으로 전역범위를 가집니다. 따라서 즉시 실행 함수나 클로저를 이용하여 변수가 오염되지 않는 영역을 확보해야 했습니다. 다른 언어처럼 private, public을 클로저, 즉시 실행 함수를 통하여 구현한 것입니다.
=> 모듈은 모듈단위의 범위를 가집니다. a 모듈에서의 a 변수와 b 모듈에서의 a 변수는 서로 다른 범위에 존재하게 됩니다.
3. 사용하지 않는 코드를 번들링 하게 되면 불필요하게 번들링된 파일의 사이즈가 커질수 있습니다. => 웹팩에서는 tree shaking을 이용하여 사용되지 않는 코드는 번들링 결과에 포함하지 않을 수 있습니다. 사용되는 외부 라이브러리가 Esm 방식을 사용하여야 하며 명시적으로 side effect이 발생하지 않는다고 코드를 추가해주면 웹팩이 명시된 부분은 번들링 결과에 포함시키지 않을 수 있습니다.
바벨 이란
javascript의 버전에 맞게 코드를 변경해주는 트랜스 파일러 입니다.
es6혹은 그 이상으로 된 코드는 es5까지만 돌아가는 브라우저에서 동작하지 않습니다.
따라서 바벨과 같은 트랜스 파일러를 통해 es5 버전의 코드로 변경해주어 여러 브라우저에서 동작하는데 이상이 없게끔 해주어야 합니다.
ts코드를 js코드로 변경해주는 tsc, 타입스크립트 컴파일러 또한 트랜스 파일러 입니다.
웹팩의 주요 속성 4가지
1. entry를 통해 진입하는 파일을 지정할 수 있습니다.
2. output를 통해 결과물에 대한 정보를 입력할 수 있습니다.
3. loader를 통해 비 javascript 파일을 웹팩에서 인식하게 할 수 있습니다.
4. plugin을 통해 웹팩이 번들링한 결과물에 추가 동작을 수행할 수 있습니다.
출처 : https://joshua1988.github.io/webpack-guide/webpack/what-is-webpack.html#웹팩이란
웹팩이란? | 웹팩 핸드북
웹팩이란? 웹팩이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)입니다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각
joshua1988.github.io
https://velog.io/@eastshine94/webpack-webpack-설치부터-실행까지
[webpack] webpack 설치부터 실행까지
webpack > 참고자료 : https://www.youtube.com/watch?v=cp_MeXO2fLg&list=PLuHgQVnccGMChcT9IKopFDoAIoTA-03DA , https://webpack.js.org/ > 이전에 [bundler](https:
velog.io
'Frontend > Webpack' 카테고리의 다른 글
| 왜 웹팩을 사용해야할까요? (0) | 2022.02.07 |
|---|