[JavaScript] Webpack

Webpack(웹팩)이란?

웹팩(Webpack)은 모듈 번들러(Module Bundler)로, 여러 개의 자바스크립트 파일을 하나의 번들 파일로 묶어주는 도구입니다.
웹 개발에서는 HTML, CSS, JavaScript, 이미지, 폰트 등 다양한 파일이 사용되는데, 웹팩을 활용하면 이를 효율적으로 관리하고 최적화할 수 있습니다.

 

1. 웹팩이 필요한 이유

✅ 여러 개의 파일을 하나로 번들링

웹 애플리케이션이 커질수록 JavaScript 파일, CSS 파일, 이미지 등이 많아지는데, 이를 효율적으로 관리하기 위해 웹팩이 사용됩니다. 웹팩을 사용하면 여러 개의 파일을 하나로 묶어 네트워크 요청을 줄이고 성능을 향상시킬 수 있습니다.

✅ 최신 JavaScript 문법을 지원

ES6 이상의 문법을 지원하지 않는 브라우저가 있을 수 있기 때문에, Babel과 함께 사용하여 최신 JavaScript 코드를 ES5로 변환할 수 있습니다.

✅ 코드 스플리팅(Code Splitting)과 트리 쉐이킹(Tree Shaking)

웹팩은 불필요한 코드를 제거하는 트리 쉐이킹(Tree Shaking) 기능과, 필요한 파일만 로드하는 코드 스플리팅(Code Splitting) 기능을 지원하여 성능 최적화에 도움을 줍니다.

 

2. 웹팩의 핵심 개념

웹팩은 아래와 같은 개념을 기반으로 동작합니다.

Entry

웹팩이 번들링을 시작할 기준이 되는 파일입니다.

module.exports = {
  entry: './src/index.js',
};

Output

번들링된 파일이 저장될 위치를 지정합니다.

module.exports = {
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist',
  },
};

Loaders

웹팩은 기본적으로 JavaScript만 이해할 수 있습니다. CSS, 이미지, TypeScript 등을 사용하려면 로더(Loaders)를 설정해야 합니다.

module: {
  rules: [
    { test: /\.css$/, use: ['style-loader', 'css-loader'] },
  ],
},

Plugins

플러그인을 활용하면 번들링 과정에서 추가적인 작업을 수행할 수 있습니다. 예를 들어, HTML 파일을 자동으로 생성하는 HtmlWebpackPlugin을 사용할 수 있습니다.

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' })
  ],
};

Mode (개발/프로덕션 모드 설정)

웹팩은 development 모드와 production 모드를 제공합니다.

module.exports = {
  mode: 'development', // 'production'으로 변경하면 최적화됨
};

 

3. 웹팩 기본 사용법

1️⃣ 웹팩 설치

npm init -y  # package.json 생성
npm install webpack webpack-cli --save-dev

2️⃣ 기본 웹팩 설정 파일 (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: /\.css$/, use: ['style-loader', 'css-loader'] },
    ],
  },
  mode: 'development',
};

3️⃣ 웹팩 실행

npx webpack

 

4. 웹팩 최적화 방법

코드 스플리팅 (Code Splitting)

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

트리 쉐이킹 (Tree Shaking)

package.json에서 sideEffects를 false로 설정하면 사용되지 않는 코드를 제거할 수 있습니다.

{
  "sideEffects": false
}

캐싱 및 압축

module.exports = {
  output: {
    filename: '[name].[contenthash].js',
  },
};

 

5. 웹팩 vs Vite 비교

기능	Webpack	Vite
번들링 속도	느림 (빌드 속도 최적화 필요)	매우 빠름 (ESM 활용)
개발 환경	핫 리로딩 지원	빠른 서버 시작
설정 복잡도	설정이 많음	설정이 단순함

 

6. 결론 및 마무리

웹팩은 강력한 번들링 도구로, 대규모 애플리케이션에서 필수적인 역할을 합니다. 최근 Vite와 같은 대체 기술이 등장했지만, 웹팩은 여전히 많은 프로젝트에서 사용되고 있습니다. 프로젝트의 요구 사항에 따라 적절한 도구를 선택하는 것이 중요합니다.

 

참고 자료

• Webpack 공식 문서