create-react-app 自定义配置

create-react-app 脚手架默认是用react-scripts 来执行package.json中的scripts，webpack的配置文件被封装起来，不能够灵活的更改webpack的配置，所以可以使用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()
);  
ps:  不同的更改配置可以在override中以不同参数的形式。

.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， addBabelPlugins } = 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,     //`style: true` 会加载 less 文件     //`style: css` 会加载 css 文件
    }),   
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: { '@primary-color': '#1DA57A' },
        localIdentName: '[local]--[hash:base64:5]' // 自定义 CSS Modules 的 localIdentName
     }),
    addBabelPlugins(
         ['syntax-dynamic-import', { legacy: true }],   // 语法动态导入， 使用场景：
             () => import(URL), webpack2官网推荐使用,属于es7范畴,需要配合babel的syntax-dynamic-  mport插件使用。   作用同 resolve => require([URL], resolve)
     ),
);

一些简单的配置已经好了。
PS:   上面利用的fixBabelImports方法可以 customize-cra中的 addBabelPlugins实现

      （1）addBabelPlugins ('import', { libraryName: 'antd', libraryDirectory: 'es', style: true, }), 

       （2）也可以用 customize-cra中的useBabelRc方法实现，利用.babelrc中的配置

附文：https://www.jianshu.com/p/87efabb6a333   babel-plugin-import的配置项