[Day90] NodeJS - 웹팩(WebPack)

1. webpack이란 무엇인가?

webpack은 자바스크립트(JS) 기반의 오픈소스 모듈 번들러이다. 모듈 번들러란, 웹 애플리케이션을 구성하는 자원(HTML, CSS, JS, 이미지 등)을 모두 각각의 모듈로 보고, 이들을 하나 또는 여러 개의 파일로 합쳐주는 도구를 의미한다.

핵심 기능:

• 번들링(Bundle): 여러 모듈과 파일을 하나의 파일로 합침.
• 로딩(Loading): JS 외 다른 웹 자원(HTML, CSS, 이미지)을 모듈로 로드.
• 변환(Transformation): Babel 같은 트랜스파일러를 이용해 최신 JS 코드를 이전 버전으로 변환.

중요성:

• 성능 최적화: 웹 애플리케이션 로딩 시간 감소. 번들링으로 인해 브라우저가 여러 파일을 하나로 받기 때문에 HTTP 요청 횟수가 줄어든다.
• 모듈 관리: 의존성 있는 파일들을 모듈로 관리하여 프로젝트의 구조를 명확하게 한다.

2. webpack의 주요 구성 요소

webpack의 작업은 크게 네 가지 주요 구성 요소로 나눌 수 있다:

1. Entry(엔트리): webpack이 파일을 번들링하기 시작하는 시작점. 기본적으로 ./src/index.js.
2. Output(아웃풋): 번들링된 파일을 저장할 위치와 파일 이름을 정의.
3. Loaders(로더): webpack은 기본적으로 JS와 JSON만 이해하지만, 로더를 통해 CSS, 이미지 등 다른 유형의 파일을 변환하여 모듈로 추가할 수 있다.
4. Plugins(플러그인): 번들링 과정에 다양한 작업을 수행할 수 있도록 도와주는 추가 도구. 예를 들어, 번들 사이즈 최적화, 환경 변수 주입 등이 있다.

3. webpack 설치 및 기본 설정

설치:

Node.js가 설치된 환경에서, 아래 명령어를 통해 webpack을 설치한다.

npm install --save-dev webpack webpack-cli

기본 설정 파일: webpack.config.js

webpack의 동작을 정의하는 설정 파일이다. 기본적인 구조는 아래와 같다:

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

• entry: 시작점을 정의한다.
• output: 출력 파일의 경로와 이름을 정의한다.

4. webpack으로 프로젝트 빌드하기

설정 파일을 작성한 후, 아래 명령어로 webpack을 실행한다:

npx webpack --config webpack.config.js

이 명령은 webpack.config.js에 정의된 설정대로 webpack을 실행하여, 지정된 엔트리 파일부터 시작하여 필요한 모든 모듈을 하나의 파일로 번들링한다.

---

5. Loaders

개념:

webpack은 기본적으로 JavaScript와 JSON 파일만 이해한다. 로더는 CSS, 이미지 파일, HTML 및 기타 비자바스크립트 파일을 webpack이 이해하고 활용할 수 있는 모듈로 변환하는 역할을 한다.

사용 방법:

1. 설치: 필요한 로더를 npm을 통해 설치한다. 예를 들어, CSS 파일을 로드하기 위해 style-loader와 css-loader를 설치한다.

   npm install --save-dev style-loader css-loader

2. webpack.config.js 설정: 로더를 module 속성 아래 rules 배열에 추가한다.

   module.exports = {
     // ...
     module: {
       rules: [
         {
           test: /\.css$/,
           use: ['style-loader', 'css-loader']
         }
       ]
     }
   };

예시:

위의 설정은 .css 파일에 대해 css-loader를 사용하여 CSS 모듈을 로드하고, style-loader를 사용하여 스타일을 DOM에 주입한다.

6. Plugins

개념:

플러그인은 webpack의 빌드 프로세스에 훅(hook)을 제공하여 번들 최적화, 자산 관리, 환경 변수 주입 등 다양한 작업을 수행한다.

사용 방법:

1. 설치: 필요한 플러그인을 npm을 통해 설치한다. 예를 들어, HTML 파일을 생성하는 html-webpack-plugin을 설치한다.

   npm install --save-dev html-webpack-plugin

2. webpack.config.js 설정: 플러그인을 plugins 배열에 추가한다.

   const HtmlWebpackPlugin = require('html-webpack-plugin');
   
   module.exports = {
     // ...
     plugins: [
       new HtmlWebpackPlugin({
         template: './src/index.html'
       })
     ]
   };

예시:

위의 설정은 HtmlWebpackPlugin을 사용하여 번들 결과를 포함하는 HTML 파일을 생성한다.

7. 설정

webpack은 매우 유연하고 확장 가능하므로, 개발 환경과 제품 환경을 위한 다양한 설정을 구분하여 관리할 수 있다.

환경 별 설정:

• 개발 환경(webpack.dev.js)과 제품 환경(webpack.prod.js)에 대한 별도의 설정 파일을 작성한다.
• webpack-merge를 사용하여 공통 설정을 병합한다.

소스 맵(Source Maps) 설정:

• 개발 중에는 소스 맵을 활성화하여 디버깅을 쉽게 한다.

  module.exports = {
    // ...
    devtool: 'source-map',
  };

개발 서버 설정:

• webpack-dev-server를 사용하여 개발 중 빠른 재빌드와 핫 리로딩을 지원한다.

  npm install --save-dev webpack-dev-server

  module.exports = {
    // ...
    devServer: {
      contentBase: './dist',
      hot: true
    }
  };

---

8. 실제 프로젝트에 webpack 적용하기 !!

프로젝트 구조:

실제 프로젝트에서 webpack을 적용할 때, 다음과 같은 기본적인 프로젝트 구조를 가지는 것이 일반적이다:

my-app/
├── src/
│   ├── index.js
│   ├── app.js
│   ├── app.css
│   └── index.html
├── dist/
├── node_modules/
├── webpack.config.js
├── package.json
└── .babelrc (Babel 설정 파일, 필요한 경우)

• src: 소스 파일들이 위치하는 디렉토리.
• dist: webpack으로 빌드된 결과물이 저장되는 디렉토리.
• webpack.config.js: webpack 설정 파일.
• .babelrc: Babel 설정 파일(ES6 이상의 JavaScript를 사용하는 경우).

적용 과정:

1. 엔트리와 아웃풋 설정: webpack.config.js에서 프로젝트의 진입점(entry point)과 결과물의 출력 경로(output)를 설정한다.

2. 로더 설정: JavaScript 이외의 파일들(CSS, 이미지 등)을 처리할 수 있도록 로더를 설정한다.

3. 플러그인 설정: HTML 파일을 자동으로 생성하거나, 환경 변수를 주입하는 등의 작업을 위해 필요한 플러그인을 설정한다.

4. 개발 서버 설정: webpack-dev-server를 설정하여 개발 중 자동으로 브라우저를 새로고침하거나, 핫 모듈 리플레이스먼트(HMR)를 활용한다.