
React团队弃用create-react-app (CRA)后,开发者们转向了Vite和Webpack等替代方案来构建React应用。本文将对比这两个工具,并提供各自的入门配置指南。
Vite vs. Webpack
Vite
Webpack
使用 Vite 创建 React 应用
<code class="bash">npm create vite@latest my-react-app -- --template react cd my-react-app npm install</code>
<code class="bash">npm run dev</code>
Vite 配置:
Vite 的默认配置通常足以满足大多数React项目的需求。如有必要,可通过 vite.config.js 进行自定义。
Detail Admin响应式后台管理模板基于Bootstrap2.3.1制作,主题干净、优雅,适合任何后端应用程序。使用最新的HTML5和CSS3功能创建。内置Sass和侧重于简单和人性化。兼容PC端和手机移动端,全套模板,包括首页、登录页、排行榜、用户、表单、图库、日历、表格、图标、UI元素等21个后台模板页面。
184
使用 Webpack 创建 React 应用
<code class="bash">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</code>
src 文件夹,并在其中添加 index.js 和 App.js 文件。public 文件夹,并在其中添加 index.html 文件。创建 webpack.config.js 文件:
<code class="javascript">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,
},
};</code>创建 .babelrc 文件:
<code class="json">{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}</code><code class="bash">npx webpack serve</code>
总结
Vite 和 Webpack 都能胜任创建无CRA的React应用。Vite 提供更快速、简单的设置,适合小型项目和快速原型开发;Webpack 则提供更强大的可配置性和丰富的生态系统,适合复杂项目。 选择最适合您项目需求的工具。 祝您编码愉快!
以上就是如何在 CRA 弃用后创建 React 应用程序的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号