参考文章是另一位博主的博客,原文地址:https://blog.csdn.net/YIDBoy/article/details/80376745
由于参考的博客在我电脑上有些时候会缺少依赖而报错,所以本篇博文在这位博主的基础上有些变化。侵删。
安装依赖
npm init -y
cnpm install -D webpack
cnpm install -D webpack-cli
cnpm install --save-dev react react-dom @types/react @types/react-dom
cnpm install --save-dev ts-loader
cnpm link typescript
cnpm install --save-dev webpack-dev-server
cnpm install -D babel-loader @babel/core @babel/preset-react // 注意,原文这里指定了babel-loader的下载版本,在我电脑上会报错,找不到该版本,所以直接删去了版本号
cnpm install antd --save
cnpm install axios
配置
tsc --init
生成typescript的配置文件:tsconfig.json,修改一下:
{
"compilerOptions": {
"sourceMap": true, //是否生成对应的.map文件
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
}
}
接着我们创建src目录,以及在src目录下创建components目录,并且创建文件:
- src/index.tsx 和 src/components/Ant.tsx
index.tsx代码如下(对原文代码略有修改):
import * as React from "react"
import * as ReactDOM from "react-dom"
import { Ant } from "./components/Ant"
ReactDOM.render(
<Ant/>,
document.getElementById("app")
)
Ant.tsx代码如下(对原文代码略有修改):
import * as React from "react"
export interface AntProps {
name?: string
company?: string
}
export class Ant extends React.Component<AntProps, {}> {
render() {
return (
<h1>
Hello, React ~ ~ ~
</h1>
)
}
}
接着我们在根目录下创建webpack.config.js和index.html:
webpack.config.js配置如下:
const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
//入口文件的路径
entry: "./src/index.tsx",
output: {
//打包的输出路径
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
// 添加需要解析的文件格式
resolve: {
extensions: ['.ts', '.tsx', '.js', '.json']
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
template: './index.html',
})
],
module: {
rules: [
{
test: /\.js$/,
include: [
path.resolve(__dirname, 'src')
],
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react'],
plugins: ['@babel/plugin-proposal-class-properties']
}
},
{
test: /\.tsx?$/,
use: ['ts-loader']
}
]
},
devServer: {
contentBase: path.resolve(__dirname, "dist"),
},
// 启用sourceMap
devtool: "source-map",
}
index.html代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello Ant</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
接着直接运行webpack-dev-server,代码报错,根据报错信息进行对应的操作:
报错原因:Cannot find module ‘clean-webpack-plugin’
解决办法:cnpm install clean-webpack-plugin
安装好之后重新运行,再次报错:
报错原因: Cannot find module ‘html-webpack-plugin’
解决办法:cnpm install html-webpack-plugin
安装好之后重新运行,再次报错:
报错原因:在webpack.config.js文件中第19行代码多余。
解决办法:直接注释掉即可。
保存之后重新运行,此时已经不再报错,编译成功:
在浏览器直接访问localhost:8080(这里需要手动打开浏览器),可以看到页面,这里已经配置了实时更新了。
但是由于每次使用 webpack-dev-server
来运行项目不太方便,因此可以再配置一下:
在package.json的"script"中加上一行代码:
"dev": "webpack-dev-server --open"
在这之后就可以直接使用命令npm run dev
来启动项目了,参数"--open
"是使项目在首次启动时会自动打开浏览器。
再执行一下npm run build
来试一下打包文件。可以打包。