create-react-app新建项目配置

1.新建

npx create-react-app react-ts --typescript
# or
yarn create react-app react-ts  --typescript

之前都是运行npm run eject暴露所有webpack配置来添加less，研究了一下antd发现了一个新方法

2.antd

yarn add antd

在index.css顶部引入antd/dist/antd.css，一般都是把App文件都删了

@import '~antd/dist/antd.css';

3.自定义配置，按需加载antd组件样式

yarn add react-app-rewired customize-cra

修改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",
}

在根目录创建config-overrides.js用于修改默认配置

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

4.使用babel-plugin-import

按需加载组件代码和样式的babel插件

yarn add babel-plugin-import

修改config-overrides.js配置文件

const {override, fixBabelImports} = require('customize-cra');
module.exports = override(
    fixBabelImports('import',{
        libraryName:'antd',
        libraryDirectory:'es',
        styles:'css'
    })
)

5.自定义主题（less)

yarn add less less-loader

修改config-overrides.js配置文件

const { override, fixBabelImports, addLessLoader } = require("customize-cra");
module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    styles: "true"
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { "@primary-color": "#1DA57A" }
  })
);

6.less模块化

没成功
在react-app-env.d.ts配置

declare module "*.module.less" {
  const classes: { [key: string]: string };
  export default classes;
}

报错

原因好像是webpack4版本里面的minimize去掉了。
没有eject不能改了
2019-12-5

7. 加入redux

8.或加入mobx(4.0兼容ie11)