如何在CRA项目中用Parcel替换Webpack？ ejected后的操作及文件疑问

谢邀！我来一步步帮你搞定把Create React App（CRA）项目从Webpack切换到Parcel的流程，尤其是你已经打算执行eject的情况：

一、先插个题外话：其实可以不用eject？ #

Parcel本身就能很好地兼容CRA的项目结构，完全可以不用执行eject操作——这样能避免暴露一堆复杂的Webpack配置文件，节省不少清理工作。不过既然你已经考虑eject，那我重点讲eject后的操作步骤。

二、eject完成后的具体操作步骤 #

1. 卸载Webpack相关依赖 #

首先把项目里所有Webpack相关的依赖都卸掉，打开你的package.json，找到带webpack、html-webpack-plugin、webpack-dev-server这类关键词的依赖，执行卸载命令：

npm uninstall webpack webpack-cli webpack-dev-server html-webpack-plugin react-scripts

（react-scripts是CRA封装Webpack的核心包，eject后也没用了，一起卸掉）

2. 安装Parcel依赖 #

现在安装Parcel v2（目前的稳定版本）：

npm install parcel --save-dev

3. 清理冗余的Webpack配置文件 #

eject后会生成config/、scripts/两个文件夹，还有根目录下的webpack.config.js、webpackDevServer.config.js等文件，这些都是Webpack专属的，直接删掉就行。

4. 修改package.json的脚本命令 #

把原来的start、build等脚本替换成Parcel的命令，保持和CRA习惯一致的输出路径：

"scripts": {
  "start": "parcel public/index.html",
  "build": "parcel build public/index.html --dist-dir build",
  "test": "jest" // 测试部分Parcel不处理，继续用原来的jest配置就行
}

解释下：Parcel的入口是你的public/index.html，它会自动解析HTML里的<script src="../src/index.js"></script>标签，找到JS入口文件，不用手动指定JS路径。

5. 关于入口文件的疑问：src/index.js不是唯一需要的文件 #

你问的src/index.js是不是Parcel所需的唯一文件？答案是否定的——Parcel会自动递归解析所有被入口文件（index.js）引入的模块，比如你的组件、样式文件、图片资源等，只要它们被正确import，Parcel都会处理。你只需要保证public/index.html正确引入了src/index.js，剩下的交给Parcel就行。

6. 处理兼容性细节 #

• CSS模块：和CRA一样，只要你的CSS文件名是xxx.module.css，Parcel会自动识别为CSS模块，不用额外配置。
• Babel与ES6+语法：Parcel自带Babel，会自动转译ES6+代码，如果你的项目有自定义的Babel配置（比如.babelrc或babel.config.json），Parcel会自动读取，不用修改。
• 环境变量：CRA用的REACT_APP_前缀的环境变量，Parcel完全支持，你的.env文件可以直接继续使用。

三、如果不想eject的简化方案（可选） #

要是你后悔eject了，或者想更省心，其实可以直接保留CRA的项目结构，不用eject：

1. 卸载react-scripts：npm uninstall react-scripts
2. 安装Parcel：npm install parcel --save-dev
3. 修改package.json脚本为上面提到的Parcel命令
4. 直接运行npm start就能启动项目，完全不用管Webpack的配置

内容的提问来源于stack exchange，提问作者ninesalt