React + Typescript + Webpack 환경 설정(CRA 없이)

17315 단어 ReacttypescriptwebpackReact

1년간 사내 프로젝트를 진행하면서 이미 개발 환경이 세팅된 상태에서 코드만 작성 하다 보니 환경 구성에 대한 지식이 부족하다고 느껴졌다. 그리고 React로 나만의 프로젝트를 만들고 싶다는 생각을 항상 해왔기 때문에 이번 기회에 환경 설정부터 하나씩 해보려고 한다.

보통 React 시작을 CRA를 사용해서 하는데, Typescript와 Webpack 설정을 직접 해보고 싶어서 생략했다.

개발 / 배포 용도로 두 가지 버전을 만들 수 있는데, 지금은 개발용부터!

기본 파일 구조

  • dist: 번들링 된 파일이 저장될 폴더
  • public: 정적 파일이 저장될 폴더
  • src: 소스 파일이 저장될 폴더
    • index.tsx
    • App.tsx
    • index.html

React + Typescript 설치

// 리액트 설치 
npm install --save react react-dom 
// 타입스크립트 설치 
npm install --save @types/react @types/react-dom

tsconfig.json파일 생성 및 내용 작성

{
  "compilerOptions": {
    "outDir": "./dist",
    "sourceMap": true,
    "noImplicitAny": false,
    "module": "commonjs",
    "target": "es6",
    "lib": ["es2015", "es2017", "dom"],
    "removeComments": true,
    "allowSyntheticDefaultImports": false,
    "jsx": "react",
    "allowJs": true,
    "baseUrl": "./",
    "paths": {
      "src/*": ["src/*"]
    }
  },
  "include": ["src"]
}

Webpack 설치

npm install webpack webpack-cli webpack-dev-server -D
  • webpack : 웹팩의 코어
  • webpack-cli : 터미널에서 웹팩 커맨드를 실행할 수 있도록 하는 도구
  • webpack-dev-server : 디스크에 저장되지 않는 메모리 컴파일을 사용하는 개발 서버

플러그인 설치

npm install clean-webpack-plugin html-webpack-plugin -D
  • clean-webpack-plugin: 웹팩을 실행할 때마다 dist 폴더를 정리하는 플러그인
  • html-webpack-plugin: html 파일을 템플릿으로 생성할 수 있게 도와주는 플러그인

webpack.config.js 파일 생성 및 설정

const path = require("path");

const { CleanWebpackPlugin } = require("clean-webpack-plugin"); //추가
const HtmlWebpackPlugin = require("html-webpack-plugin"); //추가

module.exports = {
  entry: "./src/index.tsx",
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.min.js",
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(), // 웹팩 실행시마다 dist 폴더 정리
    new HtmlWebpackPlugin({
      //index.html 자동 생성되도록 template 옵션 설정
      template: "./src/index.html",
    }),
  ],
};

파일 내용 생성
- App.tsx

import * as React from "react";

function App() {
  return <div>TEST</div>;
}

export default App;

- index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";

import App from "./App";

// index.tsx
ReactDOM.render(<App />, document.getElementById("root"));

- index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>TypeScript + React</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

package.json에 스크립트 입력

"scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode development" //(production:배포용 모드 사용 가능)
  },
  • 커맨드 창에서 npm run build로 번들링
    -> dist 파일 생성과 동시에 번들링 완료 됨
  • 커맨드 창에서 npm start로 프로젝트 실행
    -> App.tsx에 임시 설정한 "TEST" 나옴

여기까지가 React + Typescript + Webpack 기본 설정이다. 완전 기초적인 내용만 담았기 때문에 추가적인 구성은 프로젝트를 진행하면서 넣을 예정이다.

자바 프로그래밍 입문 #9
[Swift] 문자열 보간법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage