What is Webpack?
만약 최신 자바스크립트 어플리케이션을 만들고있다면 아마 “웹팩”(webpack)이라는 단어를 들어봤을겁니다. 웹팩은 자바스크립트 어플리케이션을 위한 정적 모듈 번들러(static module bundler)로서 - 어플리케이션의 모든 코드를 가져와 웹브라우저에서 사용할 수 있도록 만들어줍니다. 모듈은 앱의 자바스크립트, 노드모듈(node_module), 이미지 그리고 css스타일을 웹에서 쉽게 사용이 가능하도록 패키징이 된, 재사용이 가능한 코드의 덩어리입니다. 웹팩은 코드가 앱에서 어떻게 사용되어 지는지에 따라, 코드를 분리하며 이러한 모듈이 맡은 책임을 분리함으로써, 코드를 관리, 디버깅, 확인 및 테스트하기가 훨씬 간편해집니다.
웹팩이 어플리케이션을 처리할때, 웹팩은 프로젝트에 필요한 모듈들을 배치하는 종속 그래프(dependency graph)를 만들고 하나 혹은 그 이상의 번들을 생성합니다. 번들은 연결된 코드의 독특한 그룹으로서 브라우저에 의해 컴파일되고 변환됩니다.
만약 하나의 파일이 또 다른 파일에 의존한다면(예를들어 다른 파일에서 코드를 import해서 사용한다면), 웹팩은 이것을 종속성(dependency)으로 취급합니다. 웹팩은 또한 코드가 아닌 애셋(asset)들 (이미지나 폰트, 스타일등등.)을 가지고 어플리케이션에 대한 종속성으로 변환시킵니다.
웹팩은 5개의 중요한 부분이 있습니다.
- Entry
- Output
- Loaders
- Plugins
- Mode
Entry는 어플리케이션의 시작(entry) 포인트입니다. 이 부분은 첫번째 모듈(자바스크립트 파일)로서 웹팩이 전체적인 종속성 그래프를 만들기 위한 과정을 처리합니다. entry에서 import된 파일들을 지켜보고있다가, 종속 그래프에 이 파일들을 추가합니다. 그리고나서 어플리케이션의 실행에 필요한 모든 코드를 읽을때까지 가져온 파일을 계속 살펴봅니다.
웹팩은 다른 모듈들이 entry 포인트에 직접 혹은 간접적으로 의존하는지 알아봅니다. 최신 자바스크립트 어플리케이션에서 기본적으로 설정되어있는 entry 포인트는 ./src/index.js이지만, 원하는 파일로도 설정이 가능합니다. 아래의 예시처럼 여러개의 entry 포인트를 설정하는것도 가능합니다.
여러개의 entry 포인트들은 특히 여러 페이지를 가지고 있는 어플리케이션에서 사용됩니다. 위의 예제에서 보셨다시피, 웹팩은 3개의 분리된 종속 그래프를 만들 수 있으며 새로운 애셋(assets)을 가지고 있는 새 HTML 문서를 가져옵니다. 이렇게 함으로써 어플리케이션의 여러 페이지에서 재사용이 가능한 코드를 최대한으로 사용할 수 있게 해주기에 더욱 최적화할 수 있습니다.
Output 포인트는 파일이 파일의 이름과 함께 디스크에 쓰여지는 곳입니다. 메인 output 파일은 /dist/main.js에 쓰여지며 다른 여러 파일들도 dist 경로에 추가됩니다. output은 entry point의 경로와 같은곳으로 설정할 수 있습니다. output은 또한 컨텐츠의 이름을 해쉬(hash)나 청크(chunk)로 사용할수 있으므로 코드가 바뀌었을때 동적으로 업데이트가 됩니다. 이렇게 함으로써 올바른 코드를 제공할 수 있습니다.
기본 설정으로, 웹팩은 .js나 .json 파일들만 처리가 가능하다는 한계를 가지고 있습니다. Loader를 사용한다면, 다른 종류의 파일 타입들을 어플리케이션의 모듈로 변환하여 처리할 수 있도록 기능을 확장할 수 있습니다.
loader는 module키 안에 있는rules에서 설정됩니다. loader를 추가하는데 있어 2가지의 옵션이 요구됩니다. - test는 변환되어야 하는 파일이나 파일의 타입을 확인하며 use는 웹팩에게 파일들을 변환하기 위해 어떤 loader를 사용해야 하는지 알려줍니다. 아래의 예제를 참고해주세요.
loader는 명령문뿐만 아니라 import 구문을 사용하여 인라인으로도 이용 가능합니다.
Plugins는 번들 최적화, 환경변수 설정과 같이 loader가 완료하지 못하는 추가적인 작업을 처리합니다. 또 다른 예로, SPA(Single Page Application)에서 스타일 시트(style sheet)를 추출하거나 index.html 파일을 생성하는것이 있습니다.
위의 이미지는 SPA에서 새 inext.html 페이지를 제공하는 예시입니다.
Mode는 웹팩에게 어플리케이션에서 사용할 설정과 최적화를 알려줍니다. 이것은 웹팩안에 내장되어있으며 올바른 개발 environment를 만들기위한 어떤 특정 모드의 plugins를 작동시킵니다. mode에는 development, production, 혹은 none이 있습니다. 만약 mode가 구체적으로 명시되지 않았다면 웹팩은 기본적으로 production을 설정합니다.
Development에서는 더욱 빠른 빌드 타임과 디버깅을 위한 코드 가독성을 최적화 합니다. Production에서는 최대한 빠른 시간의 빌드타임을 위해 최적화를 해야하며 코드를 분석하고 축소하는데 더욱 긴 빌드 시간이 요구됩니다.
마지막으로 고려해야 하는 부분은 브라우저의 호환성입니다. 현재 웹팩은 ES5와 그 이상의 버전을 지원하도록 설정되어있습니다.
웹팩에 대해 쓴 이 짧은 글을 읽어보시고, 웹팩 설정을 직접 설정하고 여러분과 여러분의 자바스크립트 어플리케이션에 맞는 최적의 설치 환경을 만들수 있으면 합니다.
원문: What is Webpack?