[Javascript] 웹팩(Webpack)이란?

 

웹팩(Webpack) 개요

웹팩(Webpack)은 모듈 번들러(module bundler)입니다. 즉, 여러 파일과 모듈을 하나의 파일(bundle)로 묶어주는 역할을 합니다. 이로 인해 웹 애플리케이션의 로딩 속도를 개선하고, 코드 관리와 유지보수를 용이하게 합니다.

주요 기능

1. 모듈 번들링: 웹팩은 여러 자바스크립트 파일을 하나의 번들로 묶어줍니다. 이를 통해 파일을 효율적으로 로드할 수 있습니다.
2. 코드 스플리팅(Code Splitting): 필요한 시점에 필요한 코드만 로드할 수 있도록 번들을 나누어 로딩 속도를 최적화합니다.
3. 로더(Loader): 웹팩은 자바스크립트 파일뿐만 아니라 CSS, 이미지, 폰트 등의 파일도 모듈로 취급하여 변환할 수 있습니다.
4. 플러그인(Plugin): 빌드 프로세스를 더욱 강력하게 만들어주는 다양한 플러그인을 제공합니다. 예를 들어, 코드 압축, HTML 파일 생성, 환경 변수 설정 등을 할 수 있습니다.

웹팩의 주요 개념

1. Entry: 웹팩이 모듈화된 자바스크립트 애플리케이션을 시작할 진입점입니다. 일반적으로 하나의 엔트리 파일을 사용하지만, 다중 엔트리 포인트도 설정할 수 있습니다.
2. module.exports = { entry: './src/index.js', };
3. Output: 번들링된 파일이 저장될 위치를 지정합니다.
4. module.exports = { output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, };
5. Loaders: 웹팩은 기본적으로 자바스크립트와 JSON 파일만 이해할 수 있습니다. 로더를 사용하면 CSS, 이미지 파일 등도 번들에 포함할 수 있습니다.
6. module.exports = { module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'], }, ], }, };
7. Plugins: 빌드 프로세스를 확장하고 최적화하는데 사용됩니다.
8. const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }), ], };

웹팩 설정 예시

다음은 간단한 웹팩 설정 파일 예시입니다.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  mode: 'development',  // or 'production'
};

웹팩 사용 방법

1. 설치:
2. npm install --save-dev webpack webpack-cli
3. 스크립트 설정: package.json 파일에 빌드 스크립트를 추가합니다.
4. "scripts": { "build": "webpack" }
5. 빌드:
6. npm run build

결론

웹팩은 강력하고 유연한 모듈 번들러로, 웹 애플리케이션의 성능을 최적화하고 코드 관리를 쉽게 할 수 있게 도와줍니다. 엔트리, 아웃풋, 로더, 플러그인 등 다양한 개념을 이해하고 적절히 활용하면 더욱 효율적인 개발 환경을 구축할 수 있습니다.