新建一个 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 port
       hot: 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 进行构建和打包。