react中自定义组件importl路径正确，代码也不报错但启动和打包都提示我的那个组件找不到不能被解析

Question

开发环境基于react16+typescript3+webpack4

错误简述：

入口文件index.tsx：

 import * as React from 'react'
 import * as ReactDOM from 'react-dom'

 import Manager from './components/Manager'

 ReactDOM.render(
      <Manager />,
     document.getElementById('root') as HTMLElement
   )

Manager组件：

import * as React from 'react'  
interface IProps {
    empty?: any
}
interface IState {
    test1?: string
    test2?: string
}
export default class Manager extends React.Component<IProps, IState> {
    constructor(props: IProps) {
      super(props)
    }
    render() {
        return (
            <div>
                可以使用基础ts语法和react了
            </div>
        )
    }
}

yarn start和yarn build都报错：

 ERROR in ./src/index.tsx
Module not found: Error: Can't resolve './components/Manager' in 'E:\myWeb\coding\DEVENV\learing1011\react-dev-env-learing\src'
 @ ./src/index.tsx 3:0-43 4:36-43
 @ multi (webpack)-dev-server/client?http://localhost:8081 ./src/index.tsx

错误复现

            代码地址：
            https://github.com/dxiuxiu/react-dev-env-learing

            yarn install

            yarn start && yarn build都可以复现

Answer 1

问题已经解决了，错误原因是，webpack.config.js内容错误，将原来webpack.config.js内容全部替换为下面的内容即可解决：

 const path = require("path");
module.exports = {
  mode: 'development',
  entry: {
    index: ["./src/index.tsx"], //入口文件，若不配置webpack4将自动查找src目录下的index.js文件
  },
  output: {
    filename: "js/[name].bundle.js", //输出文件名，[name]表示入口文件js名
    path: path.resolve(__dirname, 'build/dist/'), // 输出路径
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js", "jsx"],
  },
  devtool:  'cheap-module-eval-source-map',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "awesome-typescript-loader"
      }
    ]
  }
}