24. 실전 예제 프로젝트 - 1

Webpack을 사용한 실제 프로젝트 설정 및 구성

Webpack은 모듈 번들러로, 프로젝트의 여러 자원을 번들로 묶어서 관리하는 도구입니다. 이 글에서는 Webpack을 사용하여 실제 프로젝트를 설정하고 구성하는 방법에 대해 알아보겠습니다.

1. 프로젝트 초기화

먼저, 프로젝트를 초기화합니다. 다음 명령어를 사용하여 package.json 파일을 생성합니다.

npm init -y

2. Webpack 및 관련 패키지 설치

Webpack과 필요한 로더 및 플러그인을 설치합니다.

npm install --save-dev webpack webpack-cli

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

 

Webpack에서 Babel을 사용하여 ES6+ 코드를 변환하기 위한 패키지를 설치합니다.

3. Babel 설정

프로젝트 루트에 .babelrc 파일을 생성하고 다음과 같이 설정합니다.

// .babelrc
{
  "presets": ["@babel/preset-env"]
}

4. 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'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

 

위 설정에서 entry는 진입점 파일을, output은 번들된 파일의 경로와 이름을 나타냅니다. 또한, Babel을 사용하기 위한 로더 설정이 포함되어 있습니다.

5. 스크립트 추가

package.json 파일에 다음과 같이 빌드 스크립트를 추가합니다.

// package.json
{
  "scripts": {
    "build": "webpack"
  }
}

6. 프로젝트 빌드

터미널에서 다음 명령어로 프로젝트를 빌드합니다.

npm run build

7. 결과 확인

빌드가 성공적으로 완료되면 dist 폴더에 bundle.js 파일이 생성됩니다. 이 파일은 Webpack에 의해 번들된 최종 결과물입니다.

이제 웹 페이지에서 이 파일을 로드하여 프로젝트를 실행할 수 있습니다. 이처럼 Webpack을 사용하여 프로젝트를 초기화하고 설정하는 것으로 간단한 프로젝트에서 모듈 번들링을 시작할 수 있습니다.