tsconfig 절대경로 설정시 에러

cra 없이 react를 설치 하고자 할 때 절대경로 사용시 에러가 발생했다.

{
  "compilerOptions": {
    "target": "es2021",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ],
    },
    "outDir": "./dist"
  },
  "include": [
    "src",
  ],
  "exclude": [
    "node_modules"
  ]
 ...
}

 

위와 같이 tsconfig 를 설정한 후 

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.tsx',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  resolve: {

    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.(js|ts|tsx)$/i,
        exclude: /node_modules/,
        use: {
          loader: 'ts-loader',
        },
      },
    ],
  },
...

}

webpack 으로 설정 하였고 webpack-dev-server --config webpack.dev.js --open --hot 을 사용하여 devServer를 사용하여

실행 시켜보려고 하였으나 module not found 를 발생하고 있었다.

이는 절대경로를 인식하지 못하고 있었기 때문이였고 이를 

  resolve: {
   alias: {
     '@' : path.resolve(__dirname, 'src');
   }
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  },

alias 를 추가하여 해결 할 수 있었다.