Webpack | Notion

Webpack은 모듈 번들러로, 프런트엔드 자바스크립트 애플리케이션을 위한 강력한 도구입니다. 주로 웹 애플리케이션의 자원들을 번들링하여 관리하고, 여러 모듈간의 의존성을 해결하는 데 사용됩니다. 아래에서는 Webpack의 개요, 사용 목적, 사용 방법에 대해 설명합니다.

개요:

모듈 번들러: Webpack은 프로젝트 내의 다양한 모듈들을 하나로 번들링하여 하나의 파일로 생성합니다. 이렇게 번들링된 파일은 브라우저에서 로드되어 실행됩니다.
로더 (Loaders): 다양한 파일 형식을 자바스크립트로 변환하거나 처리하기 위해 로더를 사용합니다. 예를 들어, CSS 파일, 이미지, 폰트 등을 번들링하기 위해 CSS 로더, file 로더를 사용할 수 있습니다.
플러그인 (Plugins): 번들링된 결과물을 최적화하거나 특정한 작업을 수행하기 위해 플러그인을 사용합니다. 예를 들어, HTMLWebpackPlugin을 사용하여 HTML 파일을 생성하거나, UglifyJsPlugin을 사용하여 자바스크립트 파일을 압축할 수 있습니다.

사용 목적:

모듈화: 프로젝트를 여러 모듈로 분할하여 관리할 수 있습니다. 각 모듈은 자신만의 스코프를 갖고, 필요한 모듈만 가져와서 사용할 수 있습니다.
번들링: 프로젝트에 사용되는 여러 파일들을 하나의 번들 파일로 생성하여, 브라우저에서 쉽게 로드하고 실행할 수 있습니다.
자원 관리: CSS, 이미지, 폰트 등 다양한 자원들을 관리하고 번들링하여 쉽게 사용할 수 있습니다.
코드 최적화: 번들링된 자바스크립트 파일을 최적화하여 성능을 향상시킵니다. 예를 들어, 압축, 트리 쉐이킹 등의 기법을 사용할 수 있습니다.

사용 방법:

Webpack 설치: 프로젝트 폴더에서 npm을 사용하여 Webpack과 관련 패키지들을 설치합니다.
```
bashCopy code
npm install webpack webpack-cli --save-dev
```

구성 파일 작성: 프로젝트 루트에 webpack.config.js 파일을 생성하여 웹팩의 구성을 설정합니다.

javascriptCopy code
// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

로더 및 플러그인 설정: 필요한 로더와 플러그인을 설정합니다. 예를 들어, CSS 파일을 번들링하기 위해 **style-loader**와 **css-loader**를 설치하고 설정합니다.

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

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

번들링 실행: 프로젝트 폴더에서 Webpack을 실행하여 번들링을 수행합니다.
```
bashCopy code
npx webpack
```
결과 확인: 번들링 결과물이 생성된 것을 확인하고, 웹 애플리케이션에 사용합니다.

Webpack은 이외에도 다양한 기능과 설정을 제공하므로, 프로젝트에 따라 필요한 설정을 추가하여 사용할 수 있습니다.