开发环境基于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内容全部替换为下面的内容即可解决:
constpath=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"}]}}
https://blog.csdn.net/u011481543/article/details/79477390
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。