• 웹 어플리케이션 모듈 번들러, FE 개발자들 사이에서 널리 쓰이는 툴
• 프로젝트의 모듈 의존성을 그래프로 표현하고, 하나의 번들로 결합할 수 있다

핵심 개념

• 공식 문서에선 아래 개념들만 파악해두면 된다고 한다
  • https://webpack.js.org/concepts

module.exports = {
  // Entry: 모듈간의 의존성 그래프 생성을 위한 시작점
  entry: './src/index.js',
  
  // Output: 생성한 번들 파일의 위치와 이름
  output: {
    filename: 'bundle.[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
  },
  
  // Loaders: Javascript, JSON 외 파일들의 변환, 처리를 수행
  module: {
    rules: [
      {
        test: /\\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
  
  // Plugins: 번들링 중 커스텀 작업을 위한 설정 수행
  // Loaders가 파일 변환에 초점을 맞췄다면, Plugins는 환경 변수 주입, HTML 생성 등 번들링에 초점
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack Example',
      template: './src/index.html'
    }),
    new CleanWebpackPlugin(),
  ],
  
  // Mode: Spring의 Profile과 비슷한 역할, development, production, none 중 선택
  mode: 'development',
};