Webpack으로 CRA없이 React(Typescript) 시작하기

React + Typescript + Webpack 구성

1. React

npm init -ynpm i react react-dom

• init: 프로젝트 폴더 초기화 package.json 생성

• react, react-dom: 기본 react 구성 설치

2. Typescript

npm i -D typescript @types/react @types/react-dom ts-loader
// 직접 접근 (options)
./node_modules/.bin/tsc --init

• typescript, @types/react, @types/react-dom: typescript 설치 및 타입 설치

• ts-loader: typescript -> javascript 변환 loader

• tsc --init: tsconfig.json 생성

typescript 가 전역으로 설치 되지 않았다면 node_modules 폴더에 직접 접근하여 생성!

2-1. tsconfig.json

tsconfig.json 가 생성되면 모든 옵션들이 영어 해석과 함께 주석처리 되어 나타납니다. 한글이 필요하다면 이 포스팅에서 한글로 번역해서 포스팅 해주셨습니다. 👍

3. Babel

npm i -D babel-loader @babel/core
npm i -D @babel/preset-env @babel/preset-react @babel/preset-typescript

3-1. babel.config.js

module.exports = {
  presets: [
    '@babel/preset-react',
    '@babel/preset-env',
    '@babel/preset-typescript',
  ],
};

4. Webpack

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

• webpack, webpack-cli: webpack 설치

• webpack-dev-server: 개발 과정 실시간 반영을 위해 설치

• html-webpack-plugin: 생성된 결과물에 html을 포함시켜줍니다.

4-1. webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = (env, argv) => {
  const prod = argv.mode === "production";
  return {
  mode: prod ? "production" : "development",
  devtool: prod ? "hidden-source-map" : "eval",
  entry: "./src/index.tsx",
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "bundle.js",
  },
  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx"],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: ["babel-loader", "ts-loader"],
      },
    ],
  },
  plugins: [
    new webpack.ProvidePlugin({
      React: "react",
    }),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],
  },
};

• mode: 개발, 프로덕션 모드 확인

• devtool: 모드에 따라 SourceMap 확인 여부

• entry: 컴파일을 시작할 파일, 해당 파일부터 필요한 모듈 로딩 및 하나의 파일로 묶기

• output: webpack이 생성한 결과물의 위치 및 이름

• resolve: 배열안 확장자에 따라서 처리

• module: loader 설정 / babel-loader, ts-loader 등

loader란? 🤔 - webpack이 JavaScript, TypeScript 파일이 아닌 HTML, CSS, IMG, 폰트 등을 변환할 수 있도록 도와주는 속성

• plugins: 부가 기능을 할 플러그인 설정!

4-2. Webpack-dev-server 설정

const webpack = require('webpack');
const path = require("path");
...
module.exports = (env, argv) => {
  const prod = argv.mode === "production";
  return {
  devServer: {
    port: 3000,
    hot: true,
  },
  ...,
  plugins: [
    ...,
    new webpack.HotModuleReplacementPlugin(),
  ],
  }
}

5. package.json

"scripts": {
    "dev": "webpack-dev-server --mode=development --open --hot --progress",
    "build": "webpack --mode=production  --progress",
    "start": "webpack --mode=development  --progress"
  },

마치며 👏