Webpack, Babel, TypeScript, React 기본 설정

예제 레포지토리를 참고하세요!

목차

1. Webpack 설정
2. Babel 설정
3. 로더 및 플러그인 적용
4. React 설치

---

Webpack 설정

설치

npm i -D webpack webpack-cli webpack-dev-server

공통 설정

webpack.common.js

const path = require('path');

module.exports = {
  // 빌드 환경 - 'development', 'production', 'none'
  mode: 'development',
  // 번들링 시작 진입점
  entry: {
    main: './src/index.tsx',
  },
  // 번들링 결과물
  output: {
    filename: '[name].bundle.js',
    // ** 절대 경로로 설정해야됨
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  // 로더
  module: {},
  // 플러그인
  plugins: [],
  // 모듈을 해석하는 방식
  resolve: {
    // 탐색할 확장자
    extensions: ['.tsx', '.ts', '.jsx', '.js'],
  },
};

개발 환경 설정

webpack.dev.js

// webpack 설정을 덮어써서 통합시킴
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  // webpack-dev-server 설정
  devServer: {
    // History API를 사용할 때, 404 리스폰스로 index.html을 제공.
    historyApiFallback: true,
    // 개발 서버를 시작할 때 브라우저를 염.
    open: true,
  },
});

프로덕션 환경 설정

webpack.prod.js

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
});

package.json 내 scripts 설정

{
  "scripts": {
    "start": "webpack serve --config webpack.dev.js --progress",
    "build": "webpack --config webpack.prod.js --progress"
  }
}

• serve : webpack-dev-server 실행
• --config : config 파일 지정
• --progress : 진행 상황 표시

참고 문서

webpack

• mode
• entry
• output
• output.path
• resolve
• devServer

---

Babel 설정

설치

npm i -D @babel/core @babel/preset-env @babel/preset-react core-js

preset 설정

babel.config.js

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        // 브라우저 지원 범위
        targets: {
          chrome: '51',
        },
        // 폴리필 방식
        useBuiltIns: 'entry',
        // core-js 버전
        corejs: '3.31.0',
      },
    ],
    ['@babel/preset-react'],
  ],
};

@babel/preset-typescript

• 타입체킹을 해주지 않음.

참고 문서

• @babel/preset-env
• @babel/preset-react

---

로더 및 플러그인 적용

설치

npm i -D babel-loader ts-loader html-webpack-plugin typescript

로더 및 플러그인 설정

webpack.common.js

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

module.exports = {
  mode: 'development',
  // ...
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        // ts-loader -> babel-loader 순으로 실행 됨
        use: ['babel-loader', 'ts-loader'],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      // public/index.html 파일을 사용함. 절대 경로, 상대 경로 모두 가능
      template: path.resolve(__dirname, 'public/index.html'),
    }),
  ],
  // ...
};

타입스크립트 설정

tsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "lib": ["DOM", "DOM.Iterable", "ES2023"],
    "jsx": "react-jsx",
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "allowJs": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true
  },
  "include": ["src"]
}

---

React 설치

설치

npm i react react-dom
npm i -D @types/react @types/react-dom