cra（create-react-app）中定義了許多默認(rèn)的插件配置，有時(shí)候需要根據(jù)業(yè)務(wù)需求對(duì)這些配置項(xiàng)進(jìn)行修改.
customize-cra是一款非常方便的cra定制插件，在config-overrides.js文件里可以修改cra的配置項(xiàng)。
以下步驟均在config-overrides.js文件內(nèi)進(jìn)行
- 定義
replaceConfig()方法，并在oveerride中使用
module.exports = {
webpack: override(
...,
replaceConfig(),
...,
)
}
- 在replaceConfig里可以拿到config對(duì)象，在這里可以寫一系列的方法對(duì)config進(jìn)行修改
// 在這里修改cra默認(rèn)的插件配置項(xiàng)
const replaceConfig = () => (config) => {
if (process.env.NODE_ENV === 'production') {
replaceXXXPluginConfig(config)
}
// 需要返回config對(duì)象
return config;
};
- 在replaceConfig里使用replaceXXXPluginConfig修改某個(gè)Plugin的配置項(xiàng)
function replaceXXXPluginConfig(config){
const plugin_name = 'xxx'
// 通過名稱找到該plugin
const plugin = config.plugins.find(
(p) => p.constructor.name === plugin_name,
);
// 修改該plugin的配置項(xiàng)
plugin.option.xxx = 'xxxx'
}
