React团队弃用create-react-app (CRA)后，开发者们转向了Vite和Webpack等替代方案来构建React应用。本文将对比这两个工具，并提供各自的入门配置指南。
Vite vs. Webpack
Vite
- 优点: 超快的开发服务器，配备即时热模块替换 (HMR) 功能；内置支持现代JavaScript特性；配置简洁。
- 缺点: 相对较新的工具，社区支持可能不如Webpack成熟。
Webpack
- 优点: 高度可配置且灵活，适用于复杂构建场景；拥有庞大的插件生态系统和强大的社区支持；经受了众多大型应用的考验。
- 缺点: 初始配置较复杂，耗时较长；构建速度比Vite慢。
使用 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 进行自定义。
使用 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：
创建 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>
- 配置 Babel：
创建 .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 则提供更强大的可配置性和丰富的生态系统，适合复杂项目。 选择最适合您项目需求的工具。 祝您编码愉快！
