cra(create-react-app)中定义了许多默认的插件配置,有时候需要根据业务需求对这些配置项进行修改.
customize-cra是一款非常方便的cra定制插件,在config-overrides.js文件里可以修改cra的配置项。
以下步骤均在config-overrides.js文件内进行
- 定义
replaceConfig()
方法,并在oveerride中使用
module.exports = {
webpack: override(
...,
replaceConfig(),
...,
)
}
- 在replaceConfig里可以拿到config对象,在这里可以写一系列的方法对config进行修改
// 在这里修改cra默认的插件配置项
const replaceConfig = () => (config) => {
if (process.env.NODE_ENV === 'production') {
replaceXXXPluginConfig(config)
}
// 需要返回config对象
return config;
};
- 在replaceConfig里使用replaceXXXPluginConfig修改某个Plugin的配置项
function replaceXXXPluginConfig(config){
const plugin_name = 'xxx'
// 通过名称找到该plugin
const plugin = config.plugins.find(
(p) => p.constructor.name === plugin_name,
);
// 修改该plugin的配置项
plugin.option.xxx = 'xxxx'
}