新建一个 React TypeScript 项目，并使用 Webpack 进行构建和打包

要用 create-react-app 新建一个 React TypeScript 项目，并使用 Webpack 进行构建和打包，可以按照以下步骤进行操作：

步骤 1：使用 create-react-app 创建 React TypeScript 项目

1. 确保你已经安装了 Node.js 和 npm（Node 包管理器）。

2. 打开命令行工具，运行以下命令来安装 create-react-app：

   npx create-react-app my-app --template typescript
   

   这里的 my-app 是你项目的名称，可以根据需要更改。

步骤 2：安装 Webpack 和相关插件

1. 进入项目目录：

   cd my-app
   

2. 安装 Webpack 和相关插件：

   npm install --save-dev webpack webpack-cli webpack-dev-server typescript ts-loader
   

3. 安装一些常用的 Webpack 插件：

   npm install --save-dev html-webpack-plugin clean-webpack-plugin babel-loader @babel/preset-env @babel/preset-typescript @babel/preset-react style-loader css-loader url-loader image-webpack-loader
   

步骤 3：配置 Webpack

1. 在项目根目录创建一个名为 webpack.config.js 的文件，并添加以下内容：

   const path = require('path');
   const HtmlWebpackPlugin = require('html-webpack-plugin');
   const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = {entry: './src/index.tsx',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},devtool: 'inline-source-map',devServer: {port: 8080, // you can change the porthot: true},resolve: {extensions: ['.ts', '.tsx', '.js']},module: {rules: [{test: /\.(ts|js)x?$/,exclude: /node_modules/,use: {loader: "babel-loader",options: {presets: ["@babel/preset-env","@babel/preset-typescript","@babel/preset-react",],},},},{test: /\.tsx?$/,use: 'ts-loader',exclude: /node_modules/},{test: /\.css$/,use: ['style-loader', 'css-loader']},{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,use: [{loader: "url-loader",options: {limit: 10000,name: "img/[name]_[hash:8].[ext]",},},{loader: "image-webpack-loader",options: {disable: true, // webpack@2.x and newer},},],},]},plugins: [new CleanWebpackPlugin(),new HtmlWebpackPlugin({template: './public/index.html'})]
   };
   

2. 在 package.json 文件中添加以下脚本：

   "scripts": {"dev": "webpack serve --open --config webpack.config.js --mode development","build": "webpack --config webpack.config.js --mode production"
   }
   

步骤 4：更新 TypeScript 配置

1. 创建一个 tsconfig.json 文件（如果 create-react-app 已经生成了一个，你可以根据需要进行修改）：

   {"compilerOptions": {"target": "es5","lib": ["dom", "es2015"],"allowJs": true,"skipLibCheck": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"strict": true,"forceConsistentCasingInFileNames": true,"noFallthroughCasesInSwitch": true,"module": "esnext","moduleResolution": "node","resolveJsonModule": true,"isolatedModules": true,"noEmit": false,"jsx": "react-jsx"},"include": ["src"]
   }
   

步骤 5：启动开发服务器

1. 运行以下命令启动开发服务器：

   npm run dev
   

2. 访问浏览器中的 http://localhost:8080，你应该能看到你的 React 应用正在运行。

步骤 6：构建项目

1. 运行以下命令构建项目：

   npm run build
   

构建后的文件将会放在 dist 目录中，你可以将其用于部署。

通过以上步骤，你已经成功创建了一个使用 TypeScript 的 React 项目，并使用 Webpack 进行构建和打包。