钩子

插件可使用四个钩子

overrideCracoConfig - 在 CRACO 处理之前自定义 CRACO 配置对象
overrideWebpackConfig - 在 CRACO 处理之后自定义 Webpack 配置
overrideDevServerConfig - 在 CRACO 处理之后自定义 DevServer 配置
overrideJestConfig - 在 CRACO 处理之后自定义 Jest 配置

重要提示

每个函数必须返回更新的配置对象。

overrideCracoConfig

overrideCracoConfig(data): CracoConfig

data 是具有以下结构的对象

属性	说明
`cracoConfig`	从消费者提供的CRACO 配置中读取的配置对象
`pluginOptions`	消费者提供的插件选项
`context`	包含`env` 和 `paths` 的上下文对象

此函数必须返回一个有效的CRACO 配置。

示例

craco-log-plugin.js
module.exports = {
  overrideCracoConfig: ({
    cracoConfig,
    pluginOptions,
    context: { env, paths },
  }) => {
    if (pluginOptions.preText) {
      console.log(pluginOptions.preText);
    }

    console.log(JSON.stringify(cracoConfig, null, 4));

    return cracoConfig;
  },
};

craco.config.js
const logPlugin = require('./craco-log-plugin');

module.exports = {
  // ...
  plugins: [
    {
      plugin: logPlugin,
      options: { preText: 'CRACO CONFIG' },
    },
  ],
};

overrideWebpackConfig

overrideWebpackConfig(data): WebpackConfig

data 是具有以下结构的对象

属性	说明
`webpackConfig`	已由 CRACO 自定义的Webpack 配置对象
`cracoConfig`	从消费者提供的CRACO 配置中读取的配置对象
`pluginOptions`	消费者提供的插件选项
`context`	包含`env` 和 `paths` 的上下文对象

此函数必须返回有效的 Webpack 配置。

示例

craco-log-plugin.js
module.exports = {
  overrideWebpackConfig: ({
    webpackConfig,
    cracoConfig,
    pluginOptions,
    context: { env, paths },
  }) => {
    if (pluginOptions.preText) {
      console.log(pluginOptions.preText);
    }

    console.log(JSON.stringify(webpackConfig, null, 4));

    return webpackConfig;
  },
};

craco.config.js
const logPlugin = require('./craco-log-plugin');

module.exports = {
  // ...
  plugins: [
    {
      plugin: logPlugin,
      options: { preText: 'WEBPACK CONFIG' },
    },
  ],
};

overrideDevServerConfig

overrideDevServerConfig(data): DevServerConfig

data 是具有以下结构的对象

属性	说明
`devServerConfig`	CRACO 已定制的 DevServer 配置对象
`cracoConfig`	从消费者提供的CRACO 配置中读取的配置对象
`pluginOptions`	消费者提供的插件选项
`context`	包含 `env`、`paths` 和 `allowedHost` 的上下文对象（特定于 DevServer）

此函数必须返回有效的 DevServer 配置。

示例

craco-log-plugin.js
module.exports = {
  overrideDevServerConfig: ({
    devServerConfig,
    cracoConfig,
    pluginOptions,
    context: { env, paths, allowedHost },
  }) => {
    if (pluginOptions.preText) {
      console.log(pluginOptions.preText);
    }

    console.log(JSON.stringify(devServerConfig, null, 4));

    return devServerConfig;
  },
};

craco.config.js
const logPlugin = require('./craco-log-plugin');

module.exports = {
  // ...
  plugins: [
    {
      plugin: logPlugin,
      options: { preText: 'DEVSERVER CONFIG' },
    },
  ],
};

overrideJestConfig

overrideJestConfig(data): JestConfig

data 是具有以下结构的对象

属性	说明
`jestConfig`	CRACO 已定制的 Jest 配置对象
`cracoConfig`	从消费者提供的CRACO 配置中读取的配置对象
`pluginOptions`	消费者提供的插件选项
`context`	包含 `env`、`paths`、`resolve` 和 `rootDir` 的上下文对象（特定于 Jest）

此函数必须返回有效的 Jest 配置。

示例

craco-log-plugin.js
module.exports = {
  overrideJestConfig: ({
    jestConfig,
    cracoConfig,
    pluginOptions,
    context: { env, paths, resolve, rootDir },
  }) => {
    if (pluginOptions.preText) {
      console.log(pluginOptions.preText);
    }

    console.log(JSON.stringify(jestConfig, null, 4));

    return jestConfig;
  },
};

craco.config.js
const logPlugin = require('./craco-log-plugin');

module.exports = {
  // ...
  plugins: [
    {
      plugin: logPlugin,
      options: { preText: 'JEST CONFIG' },
    },
  ],
};

钩子

overrideCracoConfig​

overrideWebpackConfig​

overrideDevServerConfig​

overrideJestConfig​

overrideCracoConfig

overrideWebpackConfig

overrideDevServerConfig

overrideJestConfig