React Typescript Webpack setup 해보기

 

새로운 폴더에서 

 

src, build 폴더 만들기

 

 

package.json

npm init 으로 package json파일 만들기 

 

 

index.html

index.html파일 만들기 
body에 id root를 가진 div태그 만들기

 

 

패키지 설치 

npm install react react-dom // react패키지
npm install -D typscript @types/react @types/react-dom //typescript 패키지

 

 

tsconfig.json파일 만들고, 설정파일 입력

src에 App.tsx파일 만들고 내용 입력

index.tsx파일 만들고 내용입력 (엔트리 포인트가 될 파일)

 

 

 

추가 패키지 설치 

리액트코드는 브라우저에서 이해하지 못함 

✨babel✨은 react와 typescript코드를 javascript코드로 변환해 줄것임

npm install @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript

 

 

babel .babelrc파일 추가 

{ "presets": [ "@babel/preset-env", ["@babel/preset-react", { "runtime": "automatic" }], "@babel/preset-typescript" ]}

 

 

webpack 디펜던시 설치

npm install webpack webpack-cli webpack-dev-server html-webpack-plugin

 

 

babel loader 패키지설치

 babel과 webpack을 사용하여 javascript파일 트랜스파일링을 허용할 수 있게 함

npm i -D babel-loader

 

 

.ts 익스텐션을 이제 사용할 수 있지만 

webpack 설정을 js로 놓을 것인데 type checking이 많이 필요하지 않은  파일들을 위해서다. 

 

webpack.config.js파일

// webpack.config.js

const path = require("path");

module.exports = {
  entry: path.resolve(__dirname, "..", "./src/index.tsx"), // 진입점(entry) 파일 경로
  output: {
    //웹팩 번들링 결과에 대한 옵션 기본경로는 dist
    filename: "bundle.js", // 번들 파일 이름
    path: path.resolve(__dirname, "dist"), // 번들 파일 저장 경로
  },
  resolve: {
    //번들링할 확장자 설정
    extensions: [".js", ".jsx", ".ts", ".tsx"],
  },
  module: {
    //번들링 할 때 플러그인 설정 가능
    rules: [
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: "file-loader", // 이미지 파일을 모듈로 처리하는 로더
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
        // style-loader : style태그를 삽입해 dom에 css추가
        // css-loader: css확장자의 css파일을 읽기 위한 로더
      },
      {
        test: /\.(tsx|ts|jsx|js)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              "@babel/preset-env",
              ["@babel/preset-react", { runtime: "automatic" }],
            ],
          },
        },
      },
      },
    ],
  },

  mode: "development",
  devServer: {
    liveReload: false,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "..", "./src/index.html"),
    }),
  ], //index.html파일에 bundle.js파일을 inject하는 플러그인
};

 

 

 

 

package.json파일에 start추가 

 

"start": "webpack serve --config webpack/webpack.config.js --open"

 

그리고 npm start로 시작해보기