react 扩展配置

• 安装react-app-rewired取代react-scripts，可以扩展webpack的配置，类似vue.config.js

npm install react-app-rewired customize-cra babel-plugin-import -D

• react-app-rewired传送门

• 修改package.json中的react-scripts为react-app-rewired

 /* package.json */
 
  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
-   "eject": "react-scripts eject",
+   "eject": "react-app-rewired eject"
}

• 在项目根目录添加文件config-overrides.js, 这是nodejs，所以用node的写法

const { override, fixBabelImports, addDecoratorsLegacy } = require('customize-cra');
// override生成webpack配置对象
module.exports = override(
    // 针对antd 实现按需打包：根据import来打包 (使用babel-plugin-import)
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,//自动打包相关的样式 默认为 style:'css'
    }),
    addDecoratorsLegacy() //配置装饰器
);