在 React 脚手架(如 create-react-app
)生成的项目中,Webpack 的配置是默认隐藏的,因为它使用了一个名为 react-scripts
的包来处理所有的构建和启动任务。然而,如果你想查看或修改 Webpack 的配置,有几种方法可以做到这一点:
- 使用
eject
命令:- 运行
npm run eject
或yarn eject
(取决于你的包管理器)会永久地将react-scripts
的配置暴露出来,包括 Webpack 的配置。 - 注意:这个操作是不可逆的,一旦执行了
eject
,你就不能再回到隐藏配置的状态了。 - 执行后,你会在项目的根目录下看到一个名为
config
的新文件夹,其中包含 Webpack 的配置文件。
- 运行
- 使用
react-app-rewired
:- 如果你不想永久地暴露 Webpack 配置,但仍然想对其进行修改,你可以使用
react-app-rewired
。这是一个社区解决方案,允许你在不执行eject
的情况下覆盖create-react-app
的默认配置。 - 安装
react-app-rewired
和任何你想要使用的自定义配置插件(如customize-cra
)。 - 修改
package.json
中的脚本命令,使用react-app-rewired
替换react-scripts
。 - 在项目根目录下创建一个
config-overrides.js
文件,用于定义你的自定义配置。
- 如果你不想永久地暴露 Webpack 配置,但仍然想对其进行修改,你可以使用
- 直接修改
node_modules/react-scripts
:- 这并不是一个推荐的方法,因为直接修改
node_modules
文件夹中的文件会导致项目难以维护,并且当你重新安装依赖项时,这些更改会丢失。 - 然而,如果你只是想快速查看一下默认配置而不打算长期修改它,你可以直接查看
node_modules/react-scripts/config
文件夹下的 Webpack 配置文件。
- 这并不是一个推荐的方法,因为直接修改
请注意,修改 Webpack 配置可能会导致构建和启动过程出现问题,特别是如果你不熟悉 Webpack 的工作原理和配置选项。在尝试修改任何配置之前,请确保你了解你正在做什么,并备份你的项目以防止任何不可预见的问题。