소개

Babel은 ES6+ 코드를 브라우저가 이해할 수 있는 예전 버전의 자바스크립트로 변환해주는 도구입니다. Webpack은 자바스크립트 모듈 번들러로, 여러 개의 모듈을 하나의 번들로 묶어주는 역할을 합니다. 이 두 가지 도구를 함께 사용하면 최신 자바스크립트 기능을 사용하면서 모듈화된 코드를 번들로 만들 수 있습니다.

Babel 설치

먼저 프로젝트 폴더에서 Babel의 필요한 패키지를 설치해야 합니다. 아래의 명령어로 Babel과 필요한 플러그인을 설치해주세요.

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

Webpack 설치

Webpack을 사용하기 위해 필요한 패키지를 설치해야 합니다. 아래의 명령어로 Webpack과 필요한 로더를 설치해주세요.

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

Babel 설정

Babel을 사용하기 위해 .babelrc 파일을 생성하고 아래의 내용을 추가해주세요.

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

Webpack 설정

Webpack 설정 파일인 webpack.config.js를 생성하고 아래의 내용을 추가해주세요.

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

실행

이제 Babel과 Webpack이 함께 동작하는지 확인해보겠습니다. src/index.js 파일을 생성하고 ES6+ 문법을 사용하는 코드를 작성해주세요. 그리고 아래의 명령어로 빌드 및 실행해주세요.

npm run build
npm run start

결과적으로 dist/bundle.js 파일이 생성되며, 해당 파일을 브라우저에서 실행하면 Babel과 Webpack이 정상적으로 동작한 것을 확인할 수 있습니다.

결론

Babel과 Webpack을 함께 사용하면 최신 자바스크립트 기능을 사용하면서 코드를 번들로 만들 수 있습니다. 이를 통해 개발자는 더욱 효율적인 자바스크립트 개발 환경을 구축할 수 있습니다.

참고 자료

• Babel 공식 문서
• Webpack 공식 문서