WebpackWebpack

Entry → Module Graph → Chunks → Output

webpack은:
1. Entry 파일(index.js)에서 시작
2. import/require 따라 의존성 그래프 구성
3. Loaders로 각 모듈 변환 (.css, .ts, 이미지 등)
4. Plugins로 번들 최적화
5. 최종 Output 파일 생성

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

module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true,
  },
  module: {
    rules: [
      { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.(png|svg|jpg)$/, type: 'asset/resource' },
    ],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
  optimization: {
    splitChunks: { chunks: 'all' },  // 코드 분할
  },
};

// math.js
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;  // 사용 안 함

// index.js
import { add } from './math';  // multiply는 번들에서 제거됨