使用react-app-rewired和customize-cra對默認設置自定義

首先，react-app-rewired是react社區開源的一個修改CRA配置的工具，例如擴展Create React App的Webpack配置，而customize-cra提供了一組用於自定義利用react-app-rewired核心功能的Create React App v2配置, 能夠經過config-overrides.js文件來對webpack配置進行擴展 

一、 用於按需加載antd的組件（具體配置方式請參照官網https://ant.design/docs/react/use-with-create-react-app-cn，這裏只對config-overrides.js文件說明）

module.exports = override(    
    fixBabelImports('import', {        
        libraryName: 'antd',        
        libraryDirectory: 'es',       
        style: 'css'
    })
);複製代碼

    補充： 若未使用customize-cra（對於react-app-rewired@2.x 如下版本）：

module.exports = function override(config, env) {    
    // do stuff with the webpack config...    
    config = injectBabelPlugin(        
        ['import', [            
            { 
                libraryName: 'antd', 
                libraryDirectory: 'es', 
                style: 'css' 
            },            
            { 
                libraryName: 'antd-mobile', 
                libraryDirectory: 'es', 
                style: 'css' 
            }        
        ]],        
        config    
    )    
    return config;
};複製代碼

二、設置絕對路徑：addWebpackAlias

module.exports = override(    
    addWebpackAlias({        
        ["mock"]: path.resolve(__dirname, "src/mock"),        
        ["containers"]: path.resolve(__dirname, "src/containers"),        
        ["components"]: path.resolve(__dirname, "src/components")   
    })
)複製代碼

三、配置less：addLessLoader (loaderOptions)

module.exports = override(    
    addLessLoader({        
        javascriptEnabled: true,        
        modifyVars: { 
            '@primary-color': '#1DA57A' 
        }    
    })
);複製代碼

結語：配置了幾個經常使用的配置，後續會繼續更新，代碼 https://git.coding.net/sunqun/react-demo-app.git