Table of Contents

웹팩을 이용하여 자바스크립트 프로젝트 관리하기

웹팩이란?

웹팩(Webpack)은 자바스크립트 애플리케이션을 위한 모듈 번들러(Module Bundler)입니다. 모듈 번들러는 애플리케이션을 구성하는 자바스크립트 파일과 스타일시트, 이미지 등과 같은 리소스들을 하나 이상의 파일로 병합(concatenation)하고 패키징(packaging)하는 도구입니다.

웹팩 설치

웹팩을 사용하기 위해서는 먼저 Node.js(https://nodejs.org/)를 설치해야 합니다. Node.js는 자바스크립트 실행 환경으로 웹팩의 실행에 필요합니다. 설치 후, 터미널 또는 명령 프롬프트에서 아래의 명령어로 웹팩을 전역 설치할 수 있습니다.

npm install -g webpack

웹팩 설정 파일

웹팩을 이용하여 번들링을 하기 위해서는 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$/, // .js 확장자를 가진 파일을 번들링
        exclude: /node_modules/, // node_modules 폴더의 파일은 제외
        use: {
          loader: 'babel-loader', // 바벨 로더 사용
          options: {
            presets: ['@babel/preset-env'] // preset-env를 사용하여 ES6+ 코드를 ES5로 변환
          }
        }
      }
    ]
  }
};

위의 설정 파일에서 entry는 번들링할 파일의 경로를, output은 번들링된 파일의 이름과 경로를 설정합니다. module에서는 어떤 모듈을 어떻게 처리할지 설정합니다. 위의 코드 예시에서는 바벨 로더를 사용하여 ES6+ 코드를 ES5로 변환하도록 설정됩니다.