Getting Started | Webpack

애플리케이션에 맞춤형 빌드 파이프라인이 필요하다면 webpack은 좋은 선택입니다. JavaScript 모듈 번들링, 애셋 처리, 로더와 플러그인 통합, 환경별 출력 구성까지 세밀하게 제어할 수 있습니다. 스크립트가 한두 개뿐인 아주 작은 페이지라면 처음에는 번들러가 필요 없을 수도 있지만, 공통 의존성, npm 패키지, 애셋, 프로덕션 빌드가 포함된 애플리케이션이라면 webpack이 전체 조립 과정을 명시적으로 제어할 수 있게 해줍니다.
Webpack은 JavaScript 모듈을 효율적으로 컴파일하는 데 사용됩니다. 설치가 완료되면 CLI 또는 API를 사용하여 webpack과 상호 작용할 수 있습니다. Webpack을 처음 사용하시는 분이라면 핵심 개념과 이 비교를 읽어보시고, 커뮤니티에 나와 있는 다른 도구들보다 webpack을 사용하는 이유를 알아보세요.
이 가이드의 예제는 webpack-cli 7을 사용하며, Node.js 20.9.0 이상이 필요합니다.
Check out this guide live on StackBlitz.
Webpack 프로젝트를 빠르게 구축하고 실행하고 싶다면 create-webpack-app으로 스캐폴딩하는 것이 가장 쉬운 방법입니다.
CLI 기반 프로젝트 설정이나 템플릿이 필요하신가요? 웹팩의 스캐폴딩 흐름은 초기화 명령을 참고하세요.
이 명령은 적절한 기본 설정이 포함된 바로 사용할 수 있는 webpack 프로젝트를 생성합니다. webpack을 수동으로 단계별로 설정하는 방법을 알고 싶다면 아래 내용을 계속 읽어보세요.
먼저 디렉터리를 생성합니다. 그 다음 npm을 초기화하고, webpack을 로컬로 설치한 후 webpack-cli(커맨드-라인에서 webpack을 실행할 때 사용되는 도구)를 설치합니다.
가이드 전반에 걸쳐 diff 블록을 사용하여 디렉터리, 파일 코드의 변경을 보여줍니다. 예를 들면,
이제 다음의 디렉터리 구조와 파일, 콘텐츠를 생성합니다.
또한 package.json 파일을 수정해 패키지를 private으로 표시하고 main 항목을 제거해야 합니다. 이렇게 하면 코드가 실수로 배포되는 일을 방지할 수 있습니다.
그리고 "type": "module"도 추가해 Node.js가 이 프로젝트의 .js 파일을 ES 모듈로 처리하도록 합니다. 이 설정은 이후의 Node.js 스크립트와 webpack 설정 파일까지 프로젝트 전반에 적용됩니다. Node의 기본 CommonJS 동작을 유지하고 싶다면 "type": "module"을 생략하고, 이 가이드 뒤쪽의 설정은 import와 export default 대신 require(...)와 module.exports로 작성하면 됩니다.
package.json의 내부 동작을 더 알고 싶으면 npm 문서를 읽어 보시기 바랍니다.
이 예시에서는 <script> 태그 사이에 암시적인 의존성이 있습니다. index.js 파일은 실행되기 전에 페이지에 lodash가 포함되어 있어야 합니다. 즉 전역 변수 _에 암묵적으로 의존하게 되므로, 스크립트 실행 순서가 중요해지고 유지보수도 어려워집니다.
이러한 방식으로 JavaScript 프로젝트를 관리하는 것은 문제가 있습니다.
Webpack은 의존성을 명시적으로 선언하고 함께 번들링함으로써 이러한 문제를 해결합니다. 덕분에 전역 변수에 의존하지 않아도 되고, 스크립트도 올바른 순서로 실행되도록 보장할 수 있습니다.
먼저 디렉터리 구조를 약간 수정하여 "배포" 코드(./dist)를 "소스" 코드(./src)와 분리합니다. "소스" 코드는 우리가 작성하고 편집하는 코드입니다. "배포" 코드는 빌드 과정을 통해 최소화하고 최적화되어 궁극적으로 브라우저에서 로드될 출력물 입니다. 다음과 같이 디렉터리 구조를 변경합니다.
dist 디렉터리는 빌드 결과물이 놓이는 곳이므로, 실제 프로젝트에서는 보통 그 안의 파일을 직접 수정하지 않습니다. 여기서는 브라우저가 첫 번째 번들을 불러올 수 있도록 임시 발판 역할로 index.html을 dist로 옮겨 두는 것입니다. 이후 다른 가이드에서는 index.html을 수동으로 수정하지 않고 자동 생성하게 됩니다. 그 단계까지 가면 dist 디렉터리를 비우고 내부 파일을 모두 다시 생성해도 안전합니다.
lodash의 의존성을 index.js와 함께 번들링 하려면, 라이브러리를 로컬에서 설치해야 합니다.
npm 5 이상에서는 npm install <package>로 설치한 패키지가 기본적으로 dependencies에 저장됩니다. 린터나 테스트 라이브러리처럼 개발 목적의 패키지를 설치하는 경우에는 npm install --save-dev를 사용하세요. 자세한 내용은 npm 문서를 참고하세요.
지금부터 스크립트로 lodash를 가져오겠습니다.
이제 스크립트로 번들링 할 것이므로 index.html을 업데이트해야 합니다. 현재 import한 lodash <script>를 삭제하고 원래의 ./src 파일 대신 다른 <script> 태그로 번들을 로드하도록 수정합니다.
몇 가지 다른 스크립트 로딩 전략이 있습니다. 지연 로딩은 위의 대안 중 하나로, 스크립트를 <head>에 통합하고 defer 속성을 부여합니다. 이 전략은 문서 파싱과 동시에 외부 스크립트 리소스를 다운로드하고, 파싱이 완료된 후 문서에 나타난 순서대로 스크립트를 실행합니다. 이는 파서가 외부 리소스를 다운로드한 후 동기적으로 실행하기 위해 잠시 멈추는 위의 전략과는 대조적입니다. 이 프로세스에 대해 자세히 알아보려면 MDN의 참조 가이드를 참고하세요.
이 설정에서 index.js는 명시적으로 lodash가 있어야 하며, 이것을 _에 바인딩합니다.(전역 스코프의 오염 없음) 모듈에 필요한 의존성을 명시함으로써 webpack은 이 정보를 사용하여 디펜던시 그래프를 만들 수 있습니다. 그런 다음 그래프를 사용하여 스크립트가 올바른 순서로 실행되는 최적화된 번들을 생성합니다.
자, 그럼 프로젝트 루트 디렉토리에서 npx webpack 명령어를 실행해 보겠습니다. webpack이 로컬에 설치되어 있다면 npx는 node_modules/.bin에 있는 바이너리를 실행하고, 그렇지 않다면 다운로드하여 실행할 수 있습니다. 이 명령어는 src/index.js에 있는 스크립트를 진입점으로 사용하여 dist/main.js를 출력으로 생성합니다.
출력은 약간 다를 수 있지만, 빌드에 성공했다면 계속 진행해도 좋습니다.
별도의 mode를 지정하지 않으면 webpack은 기본적으로 production 모드로 실행되므로, 위 출력에는 [minimized]가 포함되고 생성된 dist/main.js 역시 사람이 읽기 쉽게보다는 브라우저 실행에 맞춰 최적화됩니다. 학습 중이라면 npx webpack --mode development, yarn webpack --mode development, pnpm exec webpack --mode development로 더 읽기 쉬운 번들을 만들 수 있습니다.
브라우저에서 dist 디렉터리의 index.html을 열어보세요. 모든 것이 제대로 되었다면 'Hello webpack' 텍스트가 표시될 것입니다.
import 문과 export 문은 ES2015에서 표준화되었습니다. 현재 대부분의 브라우저가 이를 지원하지만, 새 문법을 인식하지 못하는 브라우저도 일부 존재합니다. 그래도 걱정할 필요는 없습니다. webpack이 기본적으로 이를 지원합니다.
내부적으로 webpack은 모듈 그래프를 분석한 뒤, 브라우저가 올바른 순서로 로드할 수 있는 코드로 모듈을 번들링합니다. import와 export 같은 모듈 문법을 처리하며, 그 외 다양한 모듈 문법도 지원합니다. 자세한 내용은 Module API를 참고하세요.
webpack은 import와 export 문 이외는 코드를 변경하지 않습니다. 다른 ES2015 기능을 사용한다면 webpack의 로더 시스템인 Babel을 트랜스파일러로 사용해야 합니다.
버전 4부터 webpack은 어떠한 설정도 필요하지 않습니다. 하지만 대부분의 프로젝트는 좀 더 복잡한 설정이 필요하므로 webpack에서 설정 파일을 제공합니다. 이것은 터미널에서 많은 명령어를 수동으로 입력하는 것보다 훨씬 효율적입니다. 다음과 같이 생성해 보겠습니다.
Webpack 설정 파일은 CommonJS 또는 ECMAScript 모듈 방식으로 작성할 수 있습니다. 아래 예제에서는 최신 ESM 문법을 사용합니다.
이제 새로운 설정 파일을 이용하여 다시 빌드를 실행해 보세요.
webpack.config.js가 있으면 webpack 명령은 기본으로 이것을 선택합니다. 여기서는 --config 옵션을 사용하여 어떠한 이름의 설정이든 사용할 수 있도록 합니다. 이것은 여러 개의 파일로 분할해야 하는 복잡한 설정에서 유용합니다.
설정 파일은 단순한 CLI 사용보다 훨씬 많은 유연성을 제공합니다. 로더의 규칙, 플러그인, 해석 옵션 및 기타 여러 향상된 기능을 지정할 수 있습니다. 더 자세한 것은 설정 문서를 참고하세요.
CLI에서 webpack의 로컬 사본을 실행하기 위해 약간의 단축 명령어를 설정 할 수 있습니다. npm script를 추가하여 package.json을 수정해 보겠습니다.
이제 이전에 사용한 npx 명령 대신 npm run build 명령을 사용할 수 있습니다. scripts에서는 npx와 동일한 방식으로 로컬에서 설치된 npm 패키지를 이름으로 참조할 수 있습니다. 이 규칙은 모든 컨트리뷰터가 동일한 공통의 스크립트 세트를 사용할 수 있도록 하므로 대부분의 npm 기반 프로젝트에서 표준입니다.
이제 다음 명령을 실행하고 스크립트의 별칭이 작동하는지 확인하세요.
사용자 지정 파라미터는 npm run build 명령과 파라미터 사이에 두 개의 대시(예. npm run build -- --color)를 추가하여 webpack에 전달할 수 있습니다.