create-react-app 的各种配置

写在前面：首先要用 `npm run eject` 将配置文件暴露，会多一个config文件夹，才能继续下面的配置

1、antd 的定制主题

在config -> webpack.config.js   的 getStyleLoaders 的function 中修改，实现自定义主题颜色，具体的颜色值变量参考antd官网定制主题部分

// 将 
if (preProcessor) {
      loaders.push({
        loader: require.resolve(preProcessor),
        options: {
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      });
    }
    return loaders;
// 修改为： 
if (preProcessor) {
      const loader = {
        loader: require.resolve(preProcessor),
        options: {
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      }
      if (preProcessor === 'less-loader') {
        loader.options = {
          ...loader.options,
          modifyVars: {
            'primary-color': '#0A6ED1',
            'link-color': '#1890ff',  // 链接色  
            'success-color': '#107e3e', 
            'warning-color': '#e9730c', // 警告色
            'error-color': '#BB0000',       
          },
          javascriptEnabled: true,
        }
      }
      loaders.push(loader);  
    }

2、antd 按需加载配置

 {
              test: /\.(js|mjs|jsx|ts|tsx)$/,
              include: paths.appSrc,
              loader: require.resolve('babel-loader'),
              options: {
                customize: require.resolve(
                  'babel-preset-react-app/webpack-overrides'
                ),
                
                plugins: [
                  [
                    require.resolve('babel-plugin-named-asset-import'),
                    {
                      loaderMap: {
                        svg: {
                          ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
                        },
                      },
                    },
                  ],
                   // 新加这一行实现antd按需加载
                  [ "import",{libraryName: "antd", style: true}]  
                ]
}

3、性能优化配置

  devtool: isEnvProduction
      ? shouldUseSourceMap
        ? 'source-map'
        : false
      : isEnvDevelopment && 'cheap-module-source-map',


// 修改为：
 devtool: isEnvProduction
      ? false
      : isEnvDevelopment && 'cheap-module-source-map',

// sourcemap 是方便追溯代码的，可以去掉

4、css-modules 的配置

getStyleLoaders 方法中的
{
        loader: require.resolve('css-loader'),
        options: cssOptions,
         
      },
修改为：
{
        loader: require.resolve('css-loader'),
        options: {
          ...cssOptions,
          modules: true,   // 新增对css modules的支持
          localIdentName: '[name]__[local]__[hash:base64:5]', //
        }
      },

即可使用css module 去定义自己的样式

5、使用mock-data

    （1）创建一个新的mock-server 项目， npm 安装 mock.js，我的项目目录为

      

（2）创建server.js 配置mock server

// server.js
var express = require("express")
var app = express();
var bodyParser = require('body-parser');

app.use(bodyParser.json());  //body-parser 解析json格式数据
app.use(bodyParser.urlencoded({            //此项必须在 bodyParser.json 下面,为参数编码
    extended: true
}));

var router = express.Router();

app.get('/', function(req, res) {
    res.send('hello world');
});

router.use("/test",require('./test'));
app.use("/",router)

app.listen(8000, () => {
    console.log('getData-----')
    // debug(`The fake API server is listening on ${'3001'.rainbow}.`)
})

 npm run mock , 访问 http://localhost:8000 看看是否能看到 hello world   

（3）创建mockdata

// test.js
 Mock = require("mockjs")
var express = require("express")
var router = express.Router();

router.use("/profile",function (req,res) {
    console.log(req.body);
    //调用mock方法模拟数据
    var data = Mock.mock({
            // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
            'list|1-10': [{
                // 属性 id 是一个自增数，起始值为 1，每次增 1
                'id|+1': 1
            }]
        }
    );
    return res.json(data);
})

module.exports = router;

npm run mock 访问http://localhost:8000/test/profile，能看到测试数据， 将你自己的mock数据按照这个写入

(4) 项目配置，在src 目录下创建 setupProxy.js, 将需要访问mock数据的请求，改为 /mock 开头

// setupProxy.js
const proxy = require("http-proxy-middleware");
 
module.exports = function(app) {
  app.use(
    proxy("/mock/**", {
      target: "http://localhost:8000/mock",
      changeOrigin: true
    })
  );
};

（5）由于项目中会报cors 跨域问题, 在package.json 中加入

      "proxy": "http://localhost:8000/"