React App Rewired 使用教程

React App Rewired 使用教程

react-app-rewiredOverride create-react-app webpack configs without ejecting项目地址:https://gitcode.com/gh_mirrors/re/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 的基本使用教程，希望对你有所帮助。

react-app-rewiredOverride create-react-app webpack configs without ejecting项目地址:https://gitcode.com/gh_mirrors/re/react-app-rewired