Webpack은 JavaScript 애플리케이션을 위한 모듈 번들러로, 프로젝트의 모든 모듈을 하나의 번들 파일로 만들어주는 기능을 제공합니다. 이를 통해 애플리케이션의 로딩 속도를 향상시킬 수 있고, 모듈 간의 의존성을 관리하고 코드를 구조화하는 데도 유용합니다.

Webpack 설치하기

Webpack을 사용하기 위해서는 먼저 Node.js와 npm이 설치되어 있어야 합니다. 설치가 완료되었다면 다음 명령어를 사용하여 Webpack을 Gloabl로 설치합니다.

npm install -g webpack

프로젝트 설정파일 생성하기

Webpack을 사용하기 위해서는 프로젝트 루트 디렉토리에 설정파일을 생성해야 합니다. 주로 webpack.config.js라는 이름으로 저장하며, 이 파일에는 Webpack의 동작에 대한 설정을 작성합니다.

// webpack.config.js
const path = require('path');

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

위 코드는 기본적인 웹팩 설정 파일의 예시입니다. entry는 애플리케이션의 진입점을 지정하고, output은 번들 파일이 생성될 경로와 파일명을 설정합니다. module.rules는 로더를 통해 특정 파일 형식을 처리하도록 설정하는 부분입니다. 위 설정 예시에서는 ES6로 작성된 JavaScript 파일을 Babel 로더를 통해 ES5로 변환하도록 설정되어 있습니다.

모듈 번들링하기

Webpack 설정 파일이 작성되었다면 다음 명령어를 실행하여 모듈 번들링을 수행할 수 있습니다.

webpack

위 명령어를 실행하면 entry에 설정된 진입점 파일을 읽어들여 의존성을 분석하고, 모든 모듈을 하나의 번들 파일로 만들어 output에 설정된 경로에 저장합니다.

추가 설정 및 플러그인 사용하기

Webpack은 다양한 설정 옵션과 플러그인을 제공하여 유연하게 사용할 수 있습니다. 가장 흔히 사용되는 플러그인 중 하나는 HtmlWebpackPlugin으로, HTML 파일을 번들 파일에 자동으로 연결해줍니다.

먼저 HtmlWebpackPlugin을 설치합니다.

npm install --save-dev html-webpack-plugin

설치 후 webpack.config.js 파일에 다음과 같이 플러그인을 추가합니다.

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
  // ...
};

위 설정에서 template은 번들에 포함될 HTML 파일을 의미합니다. 이후에 webpack 명령어를 실행하면 번들 파일에 HTML 파일이 자동으로 연결됩니다.

결론

Webpack은 모듈 번들링에 필요한 기능을 제공하며, 애플리케이션의 구조화와 로딩 성능을 향상시킬 수 있는 강력한 도구입니다. 기본 설정을 통해 간단히 시작할 수 있으며, 추가적인 설정과 플러그인을 사용하여 더 많은 기능을 활용할 수 있습니다.