웹 개발에서 프로젝트를 배포하는 과정은 매번 손으로 파일을 복사하고 압축하는 등 번거로운 작업입니다. 이러한 반복적인 작업을 자동화하기 위해 Webpack을 사용할 수 있습니다. Webpack은 모듈 번들러로써 자바스크립트와 그 외의 리소스들을 하나의 번들로 묶어주는 역할을 합니다.

Webpack 설치하기

먼저 Webpack을 설치해보겠습니다. npm을 사용하여 아래 명령어를 실행해주세요.

npm install webpack webpack-cli --save-dev

Webpack과 Webpack CLI가 설치되면 프로젝트 디렉토리에 webpack.config.js 파일을 생성해주세요. 이 파일은 Webpack 설정 정보를 담고 있습니다.

Webpack 설정하기

webpack.config.js 파일을 열고 아래 코드를 추가해주세요.

const path = require('path');

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

위 코드에서 entry는 웹팩이 번들링할 파일의 진입점을 나타냅니다. output은 번들링된 파일의 경로와 이름을 설정하는 부분입니다. 위 설정은 src 폴더의 index.js 파일을 번들링하여 dist 폴더에 bundle.js라는 이름으로 생성하는 것을 의미합니다.

번들링하기

Webpack이 프로젝트를 번들링할 준비가 되었으니 아래 명령어를 실행하여 번들링을 진행해주세요.

npx webpack

위 명령어를 실행하면 Webpack이 webpack.config.js를 참고해 src 폴더의 코드를 번들링하여 dist 폴더에 결과물을 생성합니다.

배포 자동화하기

매번 번들링을 수동으로 실행하는 것은 번거로운 작업입니다. 이를 자동화하기 위해 npm scripts를 사용할 수 있습니다.

package.json 파일을 열고 아래 코드를 추가해주세요.

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

위 설정은 npm run build 명령어를 실행하면 Webpack이 자동으로 번들링을 진행하도록 하는 것입니다. 이제 프로젝트를 배포할 때 npm run build 명령어를 실행하기만 하면 자동으로 번들링이 될 것입니다.

마무리

Webpack을 사용하여 프로젝트의 배포 자동화를 쉽게 구현할 수 있습니다. Webpack의 다양한 설정을 사용하여 프로젝트의 필요에 맞게 자유롭게 사용해보세요. 번거로운 작업을 자동화하여 개발에 더 많은 시간을 투자할 수 있습니다.