React & Typescript Setup (without CRA) - 2 (Webpack & babel 설정)

Webpack & babel 설정

지난 포스트에서 React & Typescript 설치 및 기본 설정을 했다.
이제부터는 Typescript를 여러 브라우저에서 지원하는 버전의 Javascript로 변환하는 일 등을 맡아서 할 Webpack & bebel 설정을 하겠당.

1. Webpack & Babel 및 loader 설치

1) webpack 설치

$ npm install -D webpack webpack-cli

2) loader 설치
loader: js파일이 아닌 웹 자원(html, css, images, font, ...)들을 webpack이 변환할 수 있게 해준다.

$ npm install -D css-loader style-loader file-loader

3) babel 설치

$ npm install -D babel-loader @babel/core @babel/preset-react @babel/preset-env @babel/preset-typescript @babel/polyfill

2. webpack 설정 파일 생성 및 설정

1) webpack.config.js

// webpack.config.js
const path = require('path');

module.exports = {
    mode: "development",
    // entry 파일 설정
    entry: { 
        polyfills: '@babel/polyfill',
        bundle: './src/index.tsx' 
    },
    resolve: { extensions: ['.tsx', '.ts', '.js'] },
    // 번들링 될 파일 정보
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
        publicPath: "/",
    },
    module: {
      rules: [
        // loader 나열
        {
          // ts, js
          test: /\.(ts|js)x?$/,
          exclude: '/node_module/',
          use: [
            {
              loader: 'babel-loader',
            },
          ],
        },
        {
          // css
          test: /\.css$/,
          use: ['style-loader', 'css-loader'],
        },
        {
          // image
          test: /\.(png|jpe?g|gif|svg|webp)$/i,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: 'Assets/Images/[name].[ext]?[hash]',
              },
            },
          ],
        },
        {
          // font
          test: /\.(woff|woff2|eot|ttf|otf)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: 'Assets/Fonts/[name].[ext]?[hash]',
              },
            },
          ],
        },
      ],
  },
}

2) webpack.config.js.prod

// webpack.config.js.prod
const path = require('path');

module.exports = {
    mode: 'production',
    // entry 파일 설정
    entry: { 
        polyfills: '@babel/polyfill',
        bundle: './src/index.tsx' 
    },
    resolve: { extensions: ['.tsx', '.ts', '.js'] },
    // 번들링 될 파일 정보
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
        publicPath: "auto",
    },
    module: {
      rules: [
        // loader 나열
        {
          // ts, js
          test: /\.(ts|js)x?$/,
          exclude: '/node_module/',
          use: [
            {
              loader: 'babel-loader',
            },
          ],
        },
        {
          // css
          test: /\.css$/,
          use: ['style-loader', 'css-loader'],
        },
        {
          // image
          test: /\.(png|jpe?g|gif|svg|webp)$/i,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: 'Assets/Images/[name].[ext]?[hash]',
              },
            },
          ],
        },
        {
          // font
          test: /\.(woff|woff2|eot|ttf|otf)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: 'Assets/Fonts/[name].[ext]?[hash]',
              },
            },
          ],
        },
      ],
  },
}

3. babel 설정 파일 생성 및 설정 (babel.config.js)

Typescript 변환에 있어서 ts-loader를 사용하지 않고, babel-loader & @babel/preset-typescript를 사용한다.

// babel.config.js
module.exports = {
  presets: [
      "@babel/preset-env", // es6 문법을 es5 이하로 변환해주는 프리셋
      "@babel/preset-react", // jsx 문법을 js로 변환해주는 프리셋
      "@babel/preset-typescript",
      ],
  };

4. webpack dev server 설정

1) webpack dev server 설치

$ npm install -D webpack-dev-server

2) webpack 설정 파일에 hot-loader, devServer 속성 추가

// webpack.config.js
devServer: {
	hot: true,
	open: true,
	historyApiFallback: true
},

3) package.json에 스크립트 추가

// package.json
"scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --config webpack.config.prod.js"
},

5. Plugin 설치 및 설정

1) html-webpack-plugin : 각 파일 형식으로 번들링 된 파일을 index.html에 자동으로 넣어준다.

$ npm install -D html-webpack-plugin

2) clean-webpack-plugin : 번들링 할 때 이전 번들링된 파일을 clear 해준다.

$ npm install -D clean-webpack-plugin

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// ...
plugins: [
  new HtmlWebpackPlugin({
    template: './public/index.html'
  }),
  new CleanWebpackPlugin(),
],

6. npm 으로 dev-server 실행

$ npm start

7. 번들링 하기

$ npm run build

(Move to Github Repository)