当前位置：首页 > news >正文

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

news 来源：原创 2024/9/29 4:55:21

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

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

确保你已经安装了 Node.js 和 npm（Node 包管理器）。
打开命令行工具，运行以下命令来安装 create-react-app：
```
npx create-react-app my-app --template typescript
```
这里的 my-app 是你项目的名称，可以根据需要更改。

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

进入项目目录：
```
cd my-app
```

安装 Webpack 和相关插件：

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

安装一些常用的 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

在项目根目录创建一个名为 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'})]
};

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

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

步骤 4：更新 TypeScript 配置

创建一个 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"]
}