Set up a modern web app by running one command. — create-react-app
创建项目
跟着文档提示，一步一步安装。
## 安装 create-react-app
npm i -g create-react-app
## 进入某个工作路径
cd yourpath
## 创建项目
npm init react-app customize-demo
## 等待项目依赖安装完成，根据控制台提示，可以 npm run start 开始使用
在 webpack.config.js 配置文件里，我们可以看到最近基本的配置。这些配置不一定符合当前的需要，例如，默认使用 CSS、Scss、Sass 进行样式开发，实际可能使用 Less，那么，我们需要自己添加配置。
如果我们要手动修改配置，官方提供了一个方式 npm run eject，但是这个方式不可逆。文档
Note: this is a one-way operation. Once you eject, you can’t go back!
另外可以通过第三方工具进行修改，这里推荐 react-app-rewired。
使用 react-app-rewired 自定义配置
注意
react-app-rewired 1.x 配合 create-react-app 1.x
react-app-rewired 2.x 配合 create-react-app 2.x
版本升级导致互不兼容，另外，react-app-rewired 2.x 应该是社区维护了。
在 react-app-rewired 1.x 的版本中，它除了提供覆盖配置的方法，还体用了一些 helpers，例如 rewireLess、rewirePreact 等，2.x 版本只保留了核心功能。
From README:
Version 2.0 removes the rewire helper functions
All helper functions:
- injectBabelPlugin
- compose
- getBabelLoader
- getLoader
- babelLoaderMatcher
- loaderNameMatches
have been removed with commit 0848602
另外一个工具帮我们实现了这些，customize-cra，这次我们将使用 react-app-rewired 和 customize-cra 一起倒腾。
## 安装依赖
npm install customize-cra react-app-rewired --save-dev
修改项目的 package.json
{
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom"
}
}
原来用 react-scripts 命令启动项目，现在改成 react-app-rewired 命令。
接着在项目根目录新建文件，命名为 config-overrides.js，也不一定要在根目录，如果要规范化开发，可以在 package.json 指定某个路径下的文件。
“config-overrides-path”: “node_modules/some-preconfigured-rewire”
纯 react-app-rewired 的方式自定义配置，参考 Extended Configuration Options 文档。
这次我们使用 customize-cra 协助自定义，参考 Using the plugins 文档。
// 基本格式
const { override } = require('customize-cra');
module.exports = override();
使用 Less
## 安装依赖
npm i --save less less-loader
修改配置文件
const { override, addLessLoader } = require('customize-cra');
module.exports = override(addLessLoader());
.less 文件以及能被 less-loader 解析，并且 .module.less 文件将会使用 CSS Modules。自定义 CSS Modules 的 localIdentName 配置，修改 addLessLoader({ localIdentName: '[local]--[hash:base64:5]' }) 即可。
antd
假设我们要使用 antd，参考 高级配置 文档。
npm i --save-dev babel-plugin-import
npm i --save antd
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: { '@primary-color': '#1DA57A' },
localIdentName: '[local]--[hash:base64:5]' // 自定义 CSS Modules 的 localIdentName
}),
);
decorators
在 create-react-app 的 Can I Use Decorators 文档中说，当前它并不是一个文档的规范，默认不推荐使用，如果要使用，需要自己手动开启。
npm i --save-dev @babel/plugin-proposal-decorators
const { override, fixBabelImports, addLessLoader, addDecoratorsLegacy } = require('customize-cra');
module.exports = override(
addDecoratorsLegacy(),
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: { '@primary-color': '#1DA57A' },
localIdentName: '[local]--[hash:base64:5]' // 自定义 CSS Modules 的 localIdentName
}),
);
添加别名
const { override, fixBabelImports, addLessLoader, addDecoratorsLegacy, addWebpackAlias } = require('customize-cra');
module.exports = override(
addDecoratorsLegacy(),
addWebpackAlias({
["ag-grid-react$"]: path.resolve(__dirname, "src/shared/agGridWrapper.js")
}),
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: { '@primary-color': '#1DA57A' },
localIdentName: '[local]--[hash:base64:5]' // 自定义 CSS Modules 的 localIdentName
}),
);
一些简单的配置已经好了。