React App Rewired 使用教程
1. 项目的目录结构及介绍
React App Rewired 项目的目录结构如下:
+-- your-project
| +-- config-overrides.js
| +-- node_modules
| +-- package.json
| +-- public
| +-- README.md
| +-- src
config-overrides.js
: 用于覆盖默认的 Webpack 配置。node_modules
: 存放项目依赖的模块。package.json
: 项目的配置文件,包含依赖、脚本等信息。public
: 存放公共资源,如index.html
。README.md
: 项目的说明文档。src
: 存放源代码文件。
2. 项目的启动文件介绍
在 package.json
中,启动脚本被修改为使用 react-app-rewired
:
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
}
start
: 启动开发服务器。build
: 构建生产环境的应用。test
: 运行测试。eject
: 弹出配置文件,不建议使用。
3. 项目的配置文件介绍
config-overrides.js
是 React App Rewired 的核心配置文件,用于修改默认的 Webpack 配置。示例如下:
module.exports = function override(config, env) {
// 在这里修改 Webpack 配置
return config;
}
config
: 默认的 Webpack 配置对象。env
: 环境变量,如development
或production
。
通过修改这个文件,你可以自定义 Webpack 的插件、加载器等配置,而无需弹出默认配置。
以上是 React App Rewired 的基本使用教程,希望对你有所帮助。