开发环境基于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都可以复现
问题已经解决了,错误原因是,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"
}
]
}
}