[ 프로젝트 ]Webpack + TypeScript + react (중간에 그만둠)

김민석·2021년 7월 8일
0

WORKOUT!

목록 보기
11/18
post-thumbnail

참고
[2019.07.11] React + TypeScript + Webpack 환경 설정 - 티스토리 블로그

[React webpack 밑바닥에서 부터 설정해보기](React webpack 밑바닥에서 부터 설정해보기)

- webpack 설치

$ yarn add webpack webpack-cli -D

- typescript 및 ts-loader 설치

$ yarn add typescript ts-loader -D

- webpack.config.json 생성 및 수정

내 블로그에 webpack.config.json 관련한 글

아래 코드는 webpack 공식 문서의 예시다.

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    app: './src/app.tsx',
  },

  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.tsx?/,
        loader: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },

  resolve: {
    extensions: ['.ts', '.tsx'],
  },

  output: {
    filename: 'app.js',
    path: path.join(__dirname + '/dist'),
  }, //출력
};

plugins: [
    new HtmlWebpackPlugin()
  ]

참고 :

SourceMap : what is sourceMap?
HtmlWebpackPlugin : github - HtmlWebpackPlugin

- tsconfig.json 설정

아래 코드는 webpack 공식 문서의 예시다.

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "node",
  }
}

내 프로젝트 내에는 조금 다르게 해줬다. mono-repo 구조로서 root에 tsconfig를 설정하고 그것을 extends 옵션으로 가져와 주었다.

내 프로젝트 내의 ts.config.json

{
    "extends": "../../tsconfig.json",

    "compilerOptions": {
      "outDir": "./dist/",
      "jsx": "react", 
      "sourceMap": true
    }
  }

- react 설치

$ yarn add react react-dom @types/react @types/react-dom


등등을 끝내고 막바지에 이르렀을 때..... 충격적인 사건이 일어났다.

next.js를 얹으려고 next에 맞게 pages 디렉토리 등을 만들고 index.tsx를 생성해서 간단한 컴포넌트를 만들고
심심해서 next dev를 실행시켰는데....

(next.js가 webpack을 자동으로 설정하는 것을 기억하지 못하고 있다가 깨달았다.)

다음 사건은 여기서 정리한다.

0개의 댓글