- 웹팩의 가장 기본적인 역할은 여러 JS, CSS 파일을 묶는다던지 JS, CSS 파일의 코드에 어떤 변화를 주기 위해 사용한다.
- 이러한 코드를 묶어 주고 변환하는 도구를 번들러라고 부른다.
- 프론트앤드는 이미지, 폰트 등의 개발자가 코드를 직접 쓰지 않는 파일과, JS, CSS, HTML 등의 개발자가 직접 코드를 쓰는 파일로 나눠져 있다. 이들을 하나로 묶어 프론트앤드의 개발에 필요한 다양한 처리를 하는 것이 웹팩의 역할이다.
- HTML에 여러개의 외부 링크 CSS, JS, 이미지, 폰트 파일이 있다면 느려진다. 이를 각각 다운로드 해야 하기 때문에 브라우저의 로딩 시간이 길어질 수 있다. 여러개의 파일을 묶어서 다운로드 되는 파일의 갯수를 줄이면 브라우저의 로딩 시간을 늘릴 수 있다는 장점이 있다.
- 프로그래밍 코드는 회사의 자산에 해당한다. 브라우저의 자바스크립트나 CSS 코드는 클라이언트가 다운로드해서 사용하며 컴파일 언어에서와 같이 사람이 알아 볼 수 없는 코드로 변환되는 방식이 아니라 개발자가 만든 코드 그대로 보이게 되므로 회사의 자산이 드러나게 된다. 따라서 자바스크립트 CSS를 남들이 사용하지 못하게 하기 위해서 사람이 읽기 어려운 코드로 변경하는데 이를 코드 난독화라고 부른다.
- 코드를 난독화 해도 결국에는 동작하는 코드이기 때문에 시간을 투자해서 분석하면 어떤 코드인지 알 수 있기도 하다. 하지만 난독화된 코드를 분석하는 것 보다 새로 만드는 것이 더 빠르다면 분석을 시도하지 않을 것이다.
- 프론트엔트의 코드는 결국에는 해석할 수 있기 때문에 유출되어서는 안 되는 회사의 핵심 기술, 알고리즘, 로직 등은 포함하지 않는 편이 좋다.
- 자바스크립트나 CSS 코드 모두 공백 및 개행 등 실제 코드의 실행과는 관계 없이 사람이 읽기 좋게 하기 위한 코드 스타일로 만들어져 있다. 공백, 개행 등의 실행과 관계 없는 부분을 최대한 줄이면 JS와 CSS 파일의 용량이 줄어든다. 또한 사람이 이해하기는 조금 난해하지만 동일한 동작을 하는 좀 더 짧은 문법을 사용한 코드로 바꾸어 용량을 줄일 수 있다. 이렇게 코드의 길이 용량을 줄이는 방식을 압축이라고 부른다.
- 또 라이브러리가 제공하는 기능 중에서 일부만 사용하는데도 전체 라이브러리를 다운로드 해야 하는 경우가 있다. 웹팩을 사용하면 라이브러리의 일부 기능만 가져오면 관련 있는 부분만 코드로 변환하기 때문에 코드의 용량을 줄일 수 있다.
- 프론트앤드를 로딩하는 유저는 압축된 파일을 받아서 네트워크 환경이 좋지 않은 곳에서 좀 더 안정적으로 페이지를 로드하는데 필요한 파일을 받을 수 있으며, 그렇지 않더라도 코드 용량이 작기 때문에 빠르게 파일을 받아 좀 더 빠르게 웹 페이지를 실행할 수 있어서 유저의 경험을 향상시킬 수 있다. 하지만 대부분의 상황에서 인터넷 속도는 충분히 빠르기 때문에 코드의 압축이 큰 영향을 주지 않을 수 있다.
- 개발 환경에서는 용량이 크더라도 사람이 보기에 좋은 코드 스타일로 개발하고, 프로덕션용은 사람이 코드를 읽을 필요가 없기 때문에 용량을 작게하는 방식으로 개발하는 방식을 사용한다.
- 실제 자바스크립트에서는 사용할 수 없지만, 웹팩에서는 사용할 수 있는 문법을 통해서 좀 더 편하고 좋은 코드를 만들 수 있다.
- 리액트의 경우 JSX라는 문법을 사용해서 태그의 구조를 만들 수 있는데, 자바스크립트에서는 지원하지 않는 문법이다. 리액트는 웹팩을 기반으로 하여 JSX라는 별도의 문법을 만들어 코드 작성을 쉽게 만드는 기술을 사용한다.
- 순수한 자바스크립트에서는 CSS 파일을 import해서 가져올 수 없다. 하지만 웹팩을 사용하면 자바스크립트에 CSS를 import하는 방식을 사용할 수 있다.
import './your/css/path/file_name.css';와 같은 방식으로 사용 가능하다. - 물론 이러한 별도의 문법을 사용하기 위해서는 웹팩에 이들을 지원하는 플러그인을 추가해 주어야 사용할 수 있다.