React团队弃用create-react-app (CRA)后，开发者们转向了Vite和webpack等替代方案来构建React应用。本文将对比这两个工具，并提供各自的入门配置指南。
Vite vs. Webpack
Vite
- 优点: 超快的开发服务器，配备即时热模块替换 (HMR) 功能；内置支持现代JavaScript特性；配置简洁。
- 缺点: 相对较新的工具，社区支持可能不如Webpack成熟。
Webpack
- 优点: 高度可配置且灵活，适用于复杂构建场景；拥有庞大的插件生态系统和强大的社区支持；经受了众多大型应用的考验。
- 缺点: 初始配置较复杂，耗时较长；构建速度比Vite慢。
使用 Vite 创建 React 应用
- 创建新项目：
npm create vite@latest my-react-app -- --template react cd my-react-app npm install
- 启动开发服务器：
npm run dev
Vite 配置:
Vite 的默认配置通常足以满足大多数React项目的需求。如有必要，可通过 vite.config.JS 进行自定义。
使用 Webpack 创建 React 应用
- 初始化项目：
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
- 创建项目结构：
- 创建 src 文件夹，并在其中添加 index.js 和 App.js 文件。
- 创建 public 文件夹，并在其中添加 index.html 文件。
- 配置 Webpack：
创建 webpack.config.js 文件：
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, }, };
- 配置 Babel：
创建 .babelrc 文件：
{ "presets": ["@babel/preset-env", "@babel/preset-react"] }
- 启动开发服务器：
npx webpack serve
总结
Vite 和 Webpack 都能胜任创建无CRA的React应用。Vite 提供更快速、简单的设置，适合小型项目和快速原型开发；Webpack 则提供更强大的可配置性和丰富的生态系统，适合复杂项目。 选择最适合您项目需求的工具。 祝您编码愉快！
