React Webpack (babel4 + typescript) 작성하기

Webpack이란?

Webpack은 최신 javascript application을 위한 정적 모듈 번들러입니다.
좀 더 설명하면 es6를 쓰는 javascript들을 모아서 하나의 파일로 만듭니다. 설정에 따라서 sass나 이미지 등도 bundle 시킬 수 있습니다.

주 목적은 다중 파일들을 하나로 묶어서 웹 로딩 시 파일 다운로드 되는 것들 최대한 줄여보자입니다.

Webpack에 넣을 패키지들

호환성 문제가 되지 않는 선에서 최신 버전으로 설치할 예정입니다. (최신을 사랑합니다.)

• webpack
• typescript
• babel

설정하기

필요한 package들을 다 설치해 봅시다.

# npm 대신 yarn을 설치하고 사용할 수 있습니다.
# webpack 설치
npm install -D webpack webpack-cli webpack-dev-server
# react, typescript 설치
npm install typescript
# babel 및 css, scss 등 webpack에서 필요한 라이브러리 설치
npm install -D @babel/core @babel/preset-env @babel/preset-react @babel/proposal-object-rest-spread @babel/proposal-class-properties babel-loader css-loader html-loader html-webpack-plugin mini-css-extract-plugin style-loader
# typescript와 react를 연결해주는 라이브러리 설치
npm install -D ts-loader

설치한 것을 토대로 webpack.config.js을 설정해봅시다.

const path = require('path');
module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  mode: 'development', // develop
  devtool:'inline-source-map', // develop
  module: {
    rules: [
      {
        test: /\.(js|ts)$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-typescript',
              '@babel/preset-react'
            ],
            plugins: [
              '@babel/proposal-class-properties',
              '@babel/proposal-object-rest-spread'
            ]
          }
        }
      },
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      }, 
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      },
      {
        test: /\.(woff|woff2|eor|ttf|otf)$/,
        use: [
          'file-loader'
        ]
      } 
    ]
  },
  resolve: {
    extension: ['.tsx','.ts','.js'],
  },
  plugins: [
    new HtmlWebpackPlugin()
  ]
};

tsconfig.json도 같이 설정해줘야 합니다.

{
  "compilerOptions": {
    "target": "esnext",
    "moduleResolution": "node",
    "allowJs": true,
    "noEmit": true,
    "strict": true,
    "isolatedModules": true,
    "esModuleInterop": true
  }
}

위처럼 설정하면 작업을 진행하면 됩니다.
만약 react를 기준으로 작성하고프다면 다음의 package를 더 설치해야합니다.

npm install react react-dom
npm install -D @babel/preset-react @types/react @types/react-dom

그리고 나서 webpack.config.js에서 preset 부분에 @babel-preset-react를 추가합니다.

React로 설정을 위에처럼 직접 할 수도 있지만 Facebook에서 만든 create-react-app을 사용하면 위에 설정들을 해줄 필요가 없어집니다.
(https://github.com/facebook/create-react-app)