29. 웹팩의 다양한 활용 사례 - 1

Webpack으로 웹 애플리케이션 빌드하기

웹 애플리케이션을 개발하고 배포하기 위해서는 여러 파일들을 효율적으로 관리하고 번들링하는 과정이 필요합니다. Webpack은 이러한 작업을 도와주는 강력한 도구 중 하나로, 프로젝트의 구조를 이해하고 최적화된 번들을 생성하는 데 사용됩니다. 이 글에서는 Webpack을 사용하여 웹 애플리케이션을 빌드하는 과정에 대해 살펴보겠습니다.

1. Webpack 설치하기

가장 먼저 프로젝트에 Webpack을 설치합니다. 다음 명령어를 사용하여 필요한 패키지를 설치합니다.

npm install --save-dev webpack webpack-cli

2. 기본 구성 파일 생성

Webpack은 기본적으로 webpack.config.js 파일을 찾아 프로젝트를 빌드합니다. 이 파일에서 웹팩의 동작 방식과 설정을 정의할 수 있습니다.

// webpack.config.js

const path = require('path');

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

 

위 설정에서 entry는 웹팩이 번들링을 시작할 진입점 파일을 나타내며, output은 번들된 파일의 이름과 경로를 지정합니다.

3. 로더 사용하기

로더는 다양한 파일 형식을 웹팩이 이해하고 처리할 수 있는 형식으로 변환하는 역할을 합니다. 예를 들어, Babel 로더를 사용하여 ES6+ 코드를 변환할 수 있습니다.

npm install --save-dev babel-loader @babel/core @babel/preset-env

 

로더를 웹팩 설정에 추가합니다.

// webpack.config.js

module.exports = {
  // ... (이전 설정은 그대로 유지)

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

4. 플러그인 활용

플러그인은 번들링 후의 추가 작업을 수행하는 데 사용됩니다. 예를 들어, HtmlWebpackPlugin은 HTML 파일을 빌드 결과물에 자동으로 추가해주는 플러그인입니다.

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

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ... (이전 설정은 그대로 유지)

  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',
    }),
  ],
};

5. 빌드 스크립트 추가

package.json 파일에 빌드 스크립트를 추가하여 웹팩을 실행할 수 있도록 합니다.

// package.json

"scripts": {
  "build": "webpack"
}

 

이제 npm run build 명령어를 통해 프로젝트를 빌드할 수 있습니다.

6. 웹 애플리케이션 실행

빌드가 완료된 후 dist 폴더에 있는 파일들을 웹 서버에 올리고, 웹 애플리케이션을 실행합니다.

이제 단계별로 Webpack을 사용하여 웹 애플리케이션을 빌드하는 방법에 대한 기본적인 이해가 되었을 것입니다. 더 나아가서 코드 스플리팅, 환경변수 처리, 최적화 등 다양한 주제에 대해 학습하여 프로젝트를 더욱 효율적으로 관리하세요.