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/"