React团队弃用create-react-app (CRA)后，开发者们转向了Vite和Webpack等替代方案来构建React应用。本文将对比这两个工具，并提供各自的入门配置指南。
Vite vs. Webpack
Vite
优点: 超快的开发服务器，配备即时热模块替换 (HMR) 功能；内置支持现代JavaScript特性；配置简洁。 缺点: 相对较新的工具，社区支持可能不如Webpack成熟。Webpack
优点: 高度可配置且灵活，适用于复杂构建场景；拥有庞大的插件生态系统和强大的社区支持；经受了众多大型应用的考验。 缺点: 初始配置较复杂，耗时较长；构建速度比Vite慢。使用 Vite 创建 React 应用
创建新项目：1
2
3
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
1
npm run dev
Vite 配置:
Vite 的默认配置通常足以满足大多数React项目的需求。如有必要，可通过 vite.config.js 进行自定义。
使用 Webpack 创建 React 应用
初始化项目：1
2
3
4
mkdir my-react-app
cd my-react-app
npm init -y
npm install react react-dom webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react
创建 webpack.config.js 文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
const path = require(path);
const HtmlWebpackPlugin = require(html-webpack-plugin);
module.exports = {
entry: ./src/index.js,
output: {
path: path.resolve(__dirname, dist),
filename: bundle.js,
},
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: babel-loader,
},
},
{
test: /.css$/,
use: [style-loader, css-loader],
},
],
},
resolve: {
extensions: [.js, .jsx],
},
plugins: [
new HtmlWebpackPlugin({
template: ./public/index.html,
}),
],
devServer: {
contentBase: path.join(__dirname, dist),
compress: true,
port: 9000,
},
};
创建 .babelrc 文件：
1
2
3
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
1
npx webpack serve
总结
以上就是如何在 CRA 弃用后创建 React 应用程序的详细内容，更多请关注php中文网其它相关文章！