CRA 없이 TS react 환경 구성

보통 cra를 이용하면 빠르게 ts 기반 react 환경을 만들 수 있습니다.

npx create-react-app [원하는 이름] --template typescript

설치 및 tsconfig.json 구성

직접 webpack 부터 react 환경을 구축해나가봅시다. 우선 최소한 설치해야 할 것들입니다.

Definitely Typed에서 제공하는 @types/react와 @types/react-dom을 설치해야 하는 것을 잊지 맙시다.

  "dependencies": {
    "@types/react": "^16.9.49",
    "@types/react-dom": "^16.9.8",
    "dotenv": "^8.2.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "typescript": "^4.0.3"
  },
  "devDependencies": {
    "awesome-typescript-loader": "^5.2.1",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12"
  }

ts 로더에 대해서는 webpack 측에서 ts-loader를 예시로 들었으나 awesome-typescript-loader(atl)가 더 좋은 편이다. atl쪽이 왜 좋냐는 데에 대해서는 github 문서에 적혀 있으니 살펴보자.

github.com/s-panferov/awesome-typescript-loader

tsconfig.json 구성

darrengwon.tistory.com/109?category=867626

tsc --init

{
  "compilerOptions": {
    "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
    "lib": [
      "es5",
      "ES2015",
      "ES2016",
      "ES2017",
      "ES2020",
      "DOM"
    ] /* Specify library files to be included in the compilation. */,
    "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
    "strict": true /* Enable all strict type-checking options. */,
    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
  }
}

추가로, dom을 돌릴 root div 하나를 만들고, 빌드된 웹팩 내용물을 script로 돌릴 HTML도 하나 두자.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./dist/index.js"></script>
  </body>
</html>

webpack 구성

webpack을 구성해봅시다.

이게 참 로더는 그렇다 치는데 devtool에서 뭘 사용할 지 고민이 됩니다. 우선 개발 시 가장 빠른 eval로 고쳐놓긴 했습니다.

require("dotenv").config();
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");

const appHtml = path.resolve(__dirname, "public", "index.html");
const appPublic = path.resolve(__dirname, "public");

const webpackEnv = process.env.NODE_ENV;
const PORT = process.env.PORT;

module.exports = (webpackEnv) => {
  const isProd = webpackEnv === "production";
  const isDev = webpackEnv === "development";

  return {
    module: webpackEnv,
    // webpack의 https://webpack.js.org/configuration/devtool/ 확인 요망
    devtool: isProd ? "cheap-module-source-map" : "eval", // 속도를 위해 개발시 eval로 교체, 배포시 가장 가벼운 cheap-module-source-map을 쓸 것인가, hidden-source-map이나 다른 걸 쓸 것인가 모르겠음
    resolve: {
      extensions: [".tsx", ".ts", ".jsx", ".js"],
    },
    entry: {
      app: "./src/index.tsx",
    }, // output [name]에 app으로 들어감
    module: {
      rules: [
        {
          oneOf: [
            {
              test: /\.(ts|tsx)$/,
              use: [
                "cache-loader",
                {
                  loader: "awesome-typescript-loader", // ts-loader보다 이게 좋더라

                  options: {
                    transpileOnly: isDev ? true : false, // 빠른 개발을 위해 개발 시에는 tanspile하지 않도록. prod 환경은 transpile을 항상 하도록
                  },
                },
              ],
            },
            {
              loader: "file-loader",
              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
              options: {
                outputPath: "static/media",
                name: "static/media/[name].[hash:8].[ext]",
                esModule: false,
              },
            },
          ],
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({ template: appHtml }), //  index.html을 public 폴더로 옮기기
      new ForkTsCheckerWebpackPlugin(), // Webpack plugin that runs TypeScript type checker on a separate process.
    ],
    output: {
      filename: "[name].js", // 여기서 name은 entry에 정한 이름이 들어감. entry에서 정하지 않으면 그냥 main이 기본값
      path: path.join(__dirname, "dist"), // dist 폴더에 넣으세요
      publicPath: "/",
    },
    cache: {
      type: isProd ? "filesystem" : "memory", // 개발시 memory, 배포시 filesystem 캐쉬
    },
    devServer: {
      host: "localhost",
      port: PORT,
      contentBase: appPublic,
      open: true, // broswer open
      hot: true, // hot-reload 활성화
      compress: true,
      historyApiFallback: true,
      overlay: true,
      stats: "errors-only",
      after: function (app, server, compiler) {
        console.log(`server on : http://localhost:${PORT}`);
      },
    },
    // stats : https://webpack.js.org/configuration/stats/ 참고
    // stats: {
    //   builtAt: false,
    //   children: false,
    //   entrypoints: false,
    //   hash: false,
    //   modules: false,
    //   version: false,
    //   publicPath: true,
    //   excludeAssets: [/\.(map|txt|html|jpg|png)$/, /\.json$/],
    //   warningsFilter: [/exceed/, /performance/],
    // },
  };
};

velog.io/@jhj46456/Typescript-React-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EC%A7%81%EC%A0%91-%EB%A7%8C%EB%93%A4%EA%B8%B0

TS + React 개발 환경 직접 만들기

Webpack v4로 Create-React-App 없이 TS + React 개발 환경을 CRA처럼 따라해봅니다.

velog.io

github.com/Kunune/ts-react-without-cra/blob/master/webpack.config.js

Kunune/ts-react-without-cra

Webpack v4로 CRA 없이 Typescript + React 개발 환경 구성. Contribute to Kunune/ts-react-without-cra development by creating an account on GitHub.

github.com

저작자표시

'🎁 Module bundler > 📖 Webpack' 카테고리의 다른 글

From neutrino v9 to Webpack v4 이전 (0)	2021.11.21
CRA 없이 webpack으로 Custom React 프로젝트 구성하기 (0)	2020.09.28
웹팩을 기초부터 하나씩 (2) : webpack.config.js (0)	2020.07.14
웹팩을 기초부터 하나씩 (1) : 모듈 번들러, 간단한 번들링 (0)	2020.07.14
[Webpack] express 환경에서의 웹팩 사용법 (scss, es6 js 변환) (1)	2020.03.19

darren, dev blog