使用react-app-rewired和customize-cra對預設設定自定義

寶寶說愛寶寶發表於2019-02-20
ReactAPP
首先，react-app-rewired是react社群開源的一個修改CRA配置的工具，例如擴充套件Create React App的Webpack配置，而customize-cra提供了一組用於自定義利用react-app-rewired核心功能的Create React App v2配置, 可以通過config-overrides.js檔案來對webpack配置進行擴充套件 


1、 用於按需載入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;
};複製程式碼


2、設定絕對路徑：addWebpackAlias

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


3、配置less：addLessLoader (loaderOptions)

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


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


相關文章