React 적용하기 | Bundling Fundamentals

[giscus[bot]]

React 적용하기 | Bundling Fundamentals

프론트엔드 번들링의 모든 것

https://frontend-fundamentals.com/bundling/webpack-tutorial/react.html

[sinandsean]

webpack.config.js의 entry는 main.tsx로 수정하지 않아도 되나요?

[Kimbangg]

@sinandsean 수정이 필요한 부분이 보인다면, PR로 편하게 올려주세요 :)

[SeongjaeHong]

3. 웹팩에 바벨 로더 설정 추가하기에서 build는 성공하지만 웹 실행 시 아래 에러가 발생합니다.

Uncaught ReferenceError: React is not defined

웹팩 설정 파일을 아래처럼 변경해서 해결했습니다.

// webpack.config.js
import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  entry: './main.tsx',
  mode: 'development',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-env',
                ['@babel/preset-react', { runtime: 'automatic' }],  // <-- 여기 수정. default 값은 runtime: 'classic' 이라고 합니다.
                '@babel/preset-typescript',
              ],
            },
          },
        ],
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
};