好的，首先你需要安装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相关内容：
```javascript
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：
```json
{
"presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"]
}
```
然后，你需要创建一个`.eslintrc.json`文件，用于配置eslint：
```json
{
"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，用于启动开发服务器和打包代码：
```json
{
"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production"
}
}
```
现在你就可以使用`npm start`命令启动开发服务器，使用`npm run build`命令打包代码了。
最低0.47元/天 解锁文章
3901
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
