要用 create-react-app
新建一个 React TypeScript 项目,并使用 Webpack 进行构建和打包,可以按照以下步骤进行操作:
步骤 1:使用 create-react-app
创建 React TypeScript 项目
-
确保你已经安装了 Node.js 和 npm(Node 包管理器)。
-
打开命令行工具,运行以下命令来安装
create-react-app
:bashnpx create-react-app my-app --template typescript
这里的
my-app
是你项目的名称,可以根据需要更改。
步骤 2:安装 Webpack 和相关插件
-
进入项目目录:
bashcd my-app
-
安装 Webpack 和相关插件:
bashnpm install --save-dev webpack webpack-cli webpack-dev-server typescript ts-loader
-
安装一些常用的 Webpack 插件:
bashnpm 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
的文件,并添加以下内容:javascriptconst 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' }) ] };
-
在
package.json
文件中添加以下脚本: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
已经生成了一个,你可以根据需要进行修改):json{ "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:启动开发服务器
-
运行以下命令启动开发服务器:
bashnpm run dev
-
访问浏览器中的
http://localhost:8080
,你应该能看到你的 React 应用正在运行。
步骤 6:构建项目
-
运行以下命令构建项目:
bashnpm run build
构建后的文件将会放在 dist
目录中,你可以将其用于部署。
通过以上步骤,你已经成功创建了一个使用 TypeScript 的 React 项目,并使用 Webpack 进行构建和打包。