지금은 웹 개발에서 모듈 시스템이 꽤 표준화되었습니다. 많은 프로젝트에서 CommonJS, AMD, ES6 등과 같은 모듈 시스템을 사용하고 있습니다. 하지만 이러한 다양한 모듈 스펙을 직접 관리하기는 상당히 번거롭습니다. 이럴 때 Webpack을 사용하면 손쉽게 모듈 관리를 할 수 있습니다.

Webpack은 모듈 간의 의존성을 추적하고 필요한 파일만 번들로 만들어 주는 번들러입니다.

Webpack 설치

먼저 Webpack을 설치해야 합니다. 이를 위해서는 Node.js와 npm이 컴퓨터에 설치되어 있어야 합니다. npm을 통해 Webpack을 설치할 수 있습니다.

$ npm install -g webpack

Global로 설치하면 커맨드 라인에서 Webpack 명령어를 사용할 수 있습니다.

Webpack 설정

Webpack을 사용하기 위해서는 configuration 파일을 생성해야 합니다. webpack.config.js라는 파일을 프로젝트 루트 폴더에 생성합니다. 이 파일에는 Webpack의 세부 설정 정보가 들어갑니다.

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/, // .js 파일에 대해서만 적용
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

위의 코드에서 entry는 Webpack이 시작점으로 삼을 파일을 지정합니다. output은 Webpack이 번들된 파일을 저장할 경로와 이름을 설정합니다.

module 섹션은 Webpack이 다양한 모듈을 어떻게 처리할지를 설정하는 부분입니다. 위의 설정 예시에서는 Babel로 자바스크립트 파일을 변환하는 설정이 들어가 있습니다.

Webpack 실행

Webpack을 실행하기 위해서는 커맨드 라인에서 webpack 명령어를 실행합니다.

$ webpack

Webpack은 설정 파일을 자동으로 인식하여 번들링을 수행합니다. 번들링된 파일은 설정한 output 경로에 생성됩니다.

결론

Webpack을 사용하면 다양한 모듈 스펙을 효율적으로 관리할 수 있습니다. 번들링, 의존성 추적 등의 기능을 제공하여 웹 개발을 더욱 편리하게 만들어 줍니다. 자세한 내용은 Webpack 공식 문서를 참고하시기 바랍니다.