1. 初始化package.json
- 创建项目文件夹
mkdir webpack-react-ts
cd webpack-react-ts - 初始化项目package.json
yarn init -y
{
"name": "webpack-react-ts",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
}
2. 添加必要的依赖包
-
项目依赖
react, react-dom -
开发依赖
编译器：babel (core, env, react, ts and loader)
跨平台环境变量配置:cross-env
webpack插件：html-webpack-plugin
serve: 提供访问静态网站，或单页应用的服务
webpack插件(js压缩优化)：terser-webpack-plugin
Typescript语言支持：typescript
Types相关的类型定义包：@types/
webpack相关：webpack (core, cli, dev-server)
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0"
},
"devDependencies": {
"@babel/core": "^7.7.7",
"@babel/preset-env": "^7.7.7",
"@babel/preset-react": "^7.7.4",
"@babel/preset-typescript": "^7.7.7",
"@types/node": "^12.12.5",
"@types/react": "^16.9.11",
"@types/react-dom": "^16.9.3",
"babel-loader": "^8.0.6",
"cross-env": "^6.0.3",
"html-webpack-plugin": "^3.2.0",
"serve": "^11.3.0",
"terser-webpack-plugin": "^2.3.2",
"typescript": "^3.7.4",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1"
}
3. 添加必要的脚本命令
- 使用cross-env 设置环境变量
- 使用webpack-dev-server 启动开发服务器
- 使用webpack进行打包编译
- 使用serve 提供访问网站服务
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server",
"build": "cross-env NODE_ENV=production webpack",
"start": "serve dist"
},
- 使用yarn命令安装应用依赖包
4. 添加babel配置文件 .babelrc
{
"presets": ["@babel/env", "@babel/react", "@babel/typescript"]
}
5. 添加tsconfig.json 支持typescript语言开发
tsc --init
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"jsx": "react",
"moduleResolution": "node",
"strict": true,
"noEmit": true,
"allowJs": true,
"skipLibCheck": true,
"isolatedModules": true,
"esModuleInterop": true
},
"include": ["src"]
}
6. 配置webpack
- entry 指出应用程序的入口文件
- output 指出webpack打包后的应用程序文件目录
- modules 配置文件转换规则
// webpack.config.js
const { resolve } = require("path");
const HtmlWebpackPlugin=require("html-webpack-plugin");
const TerserWebpackPlugin=require("terser-webpack-plugin");
const isProd=process.env.NODE_ENV === "production";
const config={
mode: isProd ? "production" : "development",
entry: {
index: "./src/index.tsx",
},
output: {
path: resolve(__dirname, "dist"),
filename: "bundle.js",
},
resolve: {
extensions: [".js", ".jsx", ".ts", ".tsx"],
},
module: {
rules: [
{
test: /\.tsx?$/,
use: "babel-loader",
exclude: /node_modules/,
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
filename: "index.html",
inject: "body",
}),
],
};
if (isProd) {
config.optimization={
minimizer: [new TerserWebpackPlugin()],
};
} else {
config.devServer={
port: 9000,
open: true,
hot: true,
compress: true,
stats: "errors-only",
overlay: true,
};
}
module.exports=config;
7. 添加React相关文件
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Webpack with React TS</title>
</head>
<body></body>
</html>
- index.tsx
import React from 'react'
import { render } from 'react-dom'
import App from './App'
render(<App />, document.body)
- App.tsx
import React from "react";
const App: React.FC:(props) => {
return <div>Webpack is cool!</div>;
};
export default App;
8. 启动应用
- yarn dev : 启动开发服务器
- yarn build : 打包应用
- yarn start : 启动产品服务
[参考] https://www.skcript.com/svr/using-webpack-with-react-typescript
标签：react,TypeScript,index,babel,React,webpack,env,true From： https://www.cnblogs.com/xiaodi-js/p/17744555.html