[javascript] Webpack 설정 파일의 구조와 기본 설정 값

29 Nov 2023

javascript

Webpack은 모듈 번들러로서 프론트엔드 개발에서 많이 사용되는 도구입니다. Webpack을 사용하기 위해서는 설정 파일을 작성해야 하는데, 이 포스트에서는 Webpack 설정 파일의 구조와 기본 설정 값에 대해 알아보겠습니다.

Webpack 설정 파일의 구조

Webpack 설정 파일은 일반적으로 프로젝트 루트 디렉토리에 webpack.config.js라는 이름으로 작성됩니다. 해당 파일은 JavaScript 형식으로 작성되며, Webpack으로 빌드할 때 필요한 설정 값을 포함하고 있습니다.

Webpack 설정 파일은 다음과 같은 구조를 가지고 있습니다:

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      // ...
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
}

entry: 웹팩 번들링의 시작점으로 설정되는 파일입니다. 보통 프로젝트의 메인 JavaScript 파일을 지정합니다.
output: 번들링된 파일의 결과물을 설정합니다. path는 출력 디렉토리를, filename은 번들 파일의 이름을 지정합니다.
module: 웹팩에서 사용할 다양한 모듈을 설정합니다. rules 배열에 각각의 모듈에 대한 로더(loader)를 정의합니다.
plugins: 웹팩에 추가적인 기능을 제공하는 플러그인을 설정합니다. 예를 들어 HTML 파일을 생성하는 플러그인인 HtmlWebpackPlugin을 사용할 수 있습니다.

프로젝트에 따라서 웹팩 설정 파일의 구조와 내용은 다를 수 있지만, 위의 예시는 일반적으로 사용되는 구조입니다.

기본 설정 값

웹팩 설정 파일에서 기본 설정 값은 다음과 같습니다:

mode: 웹팩의 동작 모드를 설정합니다 (development, production, none).
resolve: 모듈을 해석하는 방식을 설정합니다. 보통 파일 확장자나 모듈 경로를 지정합니다.
devtool: 소스 맵(Source map)을 설정합니다. 개발 시 디버깅을 도와줍니다.
optimization: 번들 최적화와 관련된 설정을 지정합니다. 예를 들어 결과 파일의 크기를 줄이기 위한 압축 방식을 설정할 수 있습니다.

이외에도 웹팩은 다양한 설정 값을 제공하고 있으며, 프로젝트의 요구에 맞게 설정을 수정할 수 있습니다.

이제 웹팩 설정 파일의 구조와 기본 설정 값에 대해 알아보았습니다. 이를 기반으로 프로젝트에 웹팩을 설정할 수 있습니다.

Webpack 설정 파일의 구조

기본 설정 값

참고 자료