Webpack 설정 생성기

기본 출력

기본값(production 모드, TypeScript, Babel, CSS 로더, HtmlWebpackPlugin)에서 생성기는 다음을 만듭니다.

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

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.[contenthash].js',
    clean: true,
  },
  resolve: { extensions: ['.ts','.tsx','.js'] },
  module: {
    rules: [
      { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ },
      { test: /\.jsx?$/, exclude: /node_modules/, use: 'babel-loader' },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],
};

각 옵션이 쓰는 것

출력에서 고정된 선택

스타터 설정을 깔끔하게 유지하기 위해 일부 값은 필드로 노출하지 않고 대신 정해 둡니다.

• 해시된 파일 이름. output.filename은 항상 bundle.[contenthash].js이며, 번들이 바뀔 때마다 브라우저 캐시를 무효화합니다.
• 깨끗한 출력. output.clean: true는 빌드마다 출력 폴더를 비웁니다. webpack 5에서 clean-webpack-plugin을 대체합니다.
• CSS는 번들에 포함되고 추출되지 않습니다. style-loader는 JavaScript로 스타일을 주입합니다. 프로덕션에서 별도의 .css 파일을 만들려면 MiniCssExtractPlugin을 직접 추가하세요.
• 개발 서버 기본. 켜면 devServer가 static, port: 3000, hot: true를 설정합니다. 앱에 필요하면 historyApiFallback이나 proxy 같은 옵션을 직접 추가하세요.

더 확장하기

생성된 파일은 출발점이지 완전한 프로덕션 설정이 아닙니다. 직접 추가하는 흔한 다음 단계는 추출한 CSS를 위한 MiniCssExtractPlugin, .scss를 위한 sass-loader, 이미지와 폰트를 위한 webpack 5 asset 모듈, 소스맵을 위한 devtool 값, 코드 분할을 위한 splitChunks 블록입니다.