使用webpack5 搭建一个 要求支持react typescript 配置eslint

好的，首先你需要安装webpack5、react、typescript、eslint以及相关的loader和插件。你可以通过以下命令安装它们：

npm install webpack webpack-cli webpack-dev-server react react-dom @types/react @types/react-dom typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier -D

接下来，你需要创建一个webpack配置文件，可以命名为`webpack.config.js`，在该文件中配置webpack相关内容：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-env',
                '@babel/preset-react',
                '@babel/preset-typescript',
              ],
            },
          },
          {
            loader: 'ts-loader',
          },
        ],
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    port: 3000,
  },
  mode: 'development',
};

在上面的配置中，我们指定了入口文件为`src/index.tsx`，打包后的输出文件为`dist/bundle.js`。我们还通过resolve属性指定了文件的拓展名，这样在引入文件时就不用指定拓展名了。

在module属性中，我们定义了不同类型文件的loader，例如对于`.tsx`和`.ts`文件，我们使用了`babel-loader`和`ts-loader`，对于`.js`和`.jsx`文件，我们只使用了`babel-loader`。此外，我们还使用了`style-loader`和`css-loader`处理`.css`文件。

在plugins属性中，我们使用了`HtmlWebpackPlugin`插件，用于生成HTML文件。在devServer属性中，我们指定了开发服务器的端口和从哪个文件夹提供内容。

最后，我们使用了`inline-source-map`作为开发模式下的source-map，将模式设置为`development`。

接下来，你需要创建一个`.babelrc`文件，用于配置babel：

{
  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"]
}

然后，你需要创建一个`.eslintrc.json`文件，用于配置eslint：

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": ["airbnb", "plugin:@typescript-eslint/recommended", "prettier"],
  "rules": {
    "prettier/prettier": ["error"],
    "react/jsx-filename-extension": [1, { "extensions": [".tsx"] }],
    "import/extensions": ["error", "never", { "svg": "always" }]
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
}

在上面的配置中，我们使用了`@typescript-eslint/parser`解析Typescript代码，并使用了`@typescript-eslint/eslint-plugin`插件提供的规则。我们还继承了`eslint-config-airbnb`和`eslint-config-prettier`，并使用了一些自定义的规则。

最后，你需要在`package.json`中添加一些scripts，用于启动开发服务器和打包代码：

{
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  }
}

现在你就可以使用`npm start`命令启动开发服务器，使用`npm run build`命令打包代码了。