TIL | 웹팩 - development / production mode

번들링

웹팩(Webpack)과 같은 번들러의 주 역할은 서로 연관(의존성) 있는 여러 JS파일(모듈)들을 하나의 번들(Bundle) 파일로 묶어주는 역할을 합니다. https://humanwater.tistory.com/2

번들링과 모듈의 차이점

모듈

모듈은 코드를 작고 관리하기 쉬운 단위로 분리하는 방법입니다. JavaScript에서 모듈은 일반적으로 특정 기능이나 라이브러리를 구현하는 코드의 집합으로, 다른 JavaScript 파일에서 재사용될 수 있습니다. 이를 통해 코드의 재사용성과 유지 보수성이 향상됩니다. 예를 들어, ES6에서 import와 export 문을 사용하여 모듈을 불러오고 내보낼 수 있습니다.

번들링

번들링은 여러 개의 파일(모듈, 라이브러리, 자산 등)을 하나 또는 소수의 파일로 결합하는 과정입니다. 웹 개발에서 번들링은 주로 성능 최적화를 위해 사용됩니다. 웹 페이지를 로드할 때 서버로부터 여러 자원을 받아야 하는데, 각 자원을 개별적으로 요청하는 것보다 번들로 묶어서 요청하는 것이 네트워크 비용을 줄이고 로딩 시간을 단축시키는 데 도움이 됩니다. 번들링은 Webpack, Rollup, Parcel 등의 도구를 사용하여 수행할 수 있습니다.

요약하자면, 모듈은 코드를 구성하는 방법에 관한 개념이고, 번들링은 이러한 모듈이나 파일들을 효율적으로 배포하기 위해 하나의 파일로 결합하는 과정을 말합니다. 따라서 번들링과 모듈은 서로 다르지만, 현대 웹 개발에서는 두 개념이 밀접하게 연관되어 사용됩니다.

Webpack

Webpack은 모드('development', 'production', 'none')와 관련된 최적화를 자동으로 사용하도록 지시합니다. Entry는 Webpack이 번들링을 수행하는 동안 그 시작점으로 사용할 파일들입니다. 이러한 지점들로부터 Webpack은 모든 import를 재귀적으로 자동으로 탐색하여 가능한 모든 의존성 경로가 소진될 때까지 진행합니다.
https://webpack.js.org/configuration/mode/
https://k6.io/docs/using-k6/modules/#setting-up-the-bundler

Webpack 사용 방법

1. webpack-cli

Webpack CLI를 설치하면 명령어를 통해 Webpack의 다양한 기능을 쉽게 사용할 수 있으며, 특히 모드(mode) 설정 같은 중요한 옵션을 명령어를 통해 지정할 수 있습니다. Webpack의 모드에는 주로 development, production, 그리고 none이 있으며, 각 모드에 따라 Webpack이 최적화되는 방식이 달라집니다.

예를 들어, development 모드에서는 빠른 빌드와 디버깅을 위해 소스 맵(source map)이 포함되고, production 모드에서는 코드 최적화와 압축을 통해 성능이 향상됩니다.

Webpack CLI를 설치하고 명령어로 모드를 설정하는 방법은 다음과 같습니다:

1. Webpack CLI 설치: 프로젝트에 Webpack과 Webpack CLI를 설치합니다. npm을 사용하는 경우, 다음 명령어를 실행합니다.

   npm install --save-dev webpack webpack-cli

2. 모드 설정을 포함한 Webpack 빌드 실행: 명령어를 통해 Webpack 빌드를 실행할 때, --mode 옵션을 사용하여 원하는 모드를 지정할 수 있습니다. 예를 들어, 개발 모드에서 빌드를 실행하는 경우 다음과 같이 입력합니다.

   npx webpack --mode development

   또는, 생산 모드에서 빌드를 실행하는 경우 다음과 같이 입력합니다.

   npx webpack --mode production

이렇게 명령어를 통해 간단하게 모드를 지정할 수 있으며, 이는 Webpack이 빌드를 어떻게 처리할지 결정하는 데 중요한 역할을 합니다. 또한, webpack.config.js 설정 파일에서 mode 옵션을 직접 지정하여 기본 모드를 설정할 수도 있습니다.

2. 커스터마이즈

사용자가 직접 Webpack 설정을 커스터마이즈하고 싶은 경우, NestJS 프로젝트에서 webpack.config.js 파일을 생성하고 수정하여 사용할 수 있습니다. 이를 통해 특정 Webpack 로더(loader)를 추가하거나, 플러그인(plugin)을 사용하는 등의 고급 설정이 가능합니다. NestJS 프로젝트에서 Webpack 설정을 커스터마이즈하는 기본적인 단계는 다음과 같습니다:

1. Webpack 및 필요한 로더/플러그인 설치: 프로젝트에 Webpack 및 필요한 로더나 플러그인을 설치합니다. 예를 들어, npm install --save-dev webpack webpack-cli을 실행하여 Webpack을 설치할 수 있습니다.

2. Webpack 설정 파일 생성: 프로젝트의 루트 디렉토리에 webpack.config.js 파일을 생성합니다. 이 파일에서는 Webpack의 다양한 설정을 정의할 수 있습니다.

3. Nest CLI 구성 수정: nest-cli.json 파일 또는 nest.json 파일에서 Webpack 설정을 사용하도록 구성을 수정해야 할 수 있습니다. 예를 들어, 다음과 같이 webpack 옵션을 사용하여 커스텀 Webpack 설정 파일을 지정할 수 있습니다:

   {
     "collection": "@nestjs/schematics",
     "sourceRoot": "src",
     "compilerOptions": {
       "webpack": true,
       "webpackConfigPath": "webpack.config.js"
     }
   }

4. Webpack 설정 구성: webpack.config.js 파일에서 필요한 로더, 플러그인, 해석(resolution) 규칙 등을 구성합니다. 예를 들어, CSS 파일을 처리하기 위한 로더를 설정하거나, 환경 변수를 사용하기 위한 플러그인을 추가할 수 있습니다.