react-app-rewired
教程
1. 项目介绍
react-app-rewired
是一个为 create-react-app
(CRA)构建的应用提供免 eject 方式修改 Webpack 配置的工具。它允许开发者在不脱离 CRA 的基础上自定义 Webpack 配置,通过配置插件和加载器来满足特定需求。这样既能保持 CRA 的易用性和更新性,又能灵活地定制化开发环境。
2. 项目快速启动
安装依赖
首先,确保已安装 create-react-app
。然后,在你的 CRA 项目中安装 react-app-rewired
和一个可选的配置文件 config-overrides.js
:
npm install react-app-rewired --save-dev
创建配置文件
在项目根目录下创建一个 config-overrides.js
文件,内容如下:
// config-overrides.js
module.exports = function override(config, env) {
// 在这里对 Webpack 配置做修改
return config;
}
更新 package.json
脚本
接着,你需要修改 package.json
中的脚本来使用 react-app-rewired
替换原本的 react-scripts
:
{
...
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test"
},
...
}
现在,你可以像平时一样运行 npm start
、npm run build
和 npm test
来执行相应的任务,但此时它们将会使用你自定义的配置。
3. 应用案例和最佳实践
-
添加 CSS Modules 支持:
// config-overrides.js const { injectBabelPlugin } = require('react-app-rewired'); module.exports = function override(config) { config.module.rules.push({ test: /\.module\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { modules: true, localIdentName: '[name]__[local]___[hash:base64:5]' } } ] }); return config; };
-
自定义 Babel 配置:
// config-overrides.js const { rewireBabelOptions } = require('react-app-rewired'); module.exports = function override(config) { config = rewireBabelOptions(config, () => ({ plugins: ['@babel/plugin-proposal-class-properties'] })); return config; };
4. 典型生态项目
react-app-rewire-coffeescript
: 为 CoffeeScript 提供支持react-app-rewire-typescript
: 添加 TypeScript 支持react-app-rewire-babel-loader
: 自定义 Babel 配置react-app-rewire-postcss
: 添加 PostCSS 支持
这些生态项目通常是基于 react-app-rewired
的封装,让开发者更方便地引入特定语言或技术栈的配置。
通过 react-app-rewired
,你可以轻松地为你的 CRA 项目添加各种自定义功能,而无需担心将来升级时遇到冲突。只需记住,随着你的项目变得越来越复杂,保持良好组织和注释是非常重要的,以便于维护和理解你的配置改动。