跳至主要内容

Webpack Asset 模块

Webpack asset module 的实用函数

const {
  assetModuleByName,
  getAssetModule,
  getAssetModules,
  addBeforeAssetModule,
  addBeforeAssetModules,
  addAfterAssetModule,
  addAfterAssetModules,
  removeAssetModules,
} = require('@craco/craco');

函数​

assetModuleByName​

assetModuleByName(targetAssetModuleName: string): AssetModuleMatcher

返回一个 asset module matcher 函数，用于与其他 asset module 实用函数一起使用，以将名称与现有的 asset module 进行匹配。

getAssetModule​

getAssetModule(webpackConfig: WebpackConfig, matcher: AssetModuleMatcher)

从 Webpack 配置中获取匹配器返回 true 的第一个asset 模块。

返回类型​

{
  isFound: boolean;
  match: {
    rule: Rule;
    index: number;
  }
}

用法​

const { getAssetModule, assetModuleByName } = require('@craco/craco');

const { isFound, match } = getAssetModule(
  webpackConfig,
  assetModuleByName('asset/source')
);

if (isFound) {
  // do stuff...
}

getAssetModules​

getAssetModules(webpackConfig: WebpackConfig, matcher: AssetModuleMatcher)

从 Webpack 配置中获取匹配器返回 true 的所有asset 模块。

返回类型​

{
  hasFoundAny: boolean;
  matches: [
    {
      rule: Rule;
      index: number;
    }
  ]
}

用法​

const { getAssetModules, assetModuleByName } = require('@craco/craco');

const { hasFoundAny, matches } = getAssetModules(
  webpackConfig,
  assetModuleByName('asset/inline')
);

if (hasFoundAny) {
  matches.forEach((x) => {
    // do stuff...
  });
}

addBeforeAssetModule​

addBeforeAssetModule(webpackConfig: WebpackConfig, matcher: AssetModuleMatcher, newAssetModule: Rule)

在匹配器返回 true 的资产模块之前添加一个新的资产模块，该模块在 Webpack 配置中。

返回类型​

{
  isAdded: boolean;
}

用法​

const { addBeforeAssetModule, assetModuleByName } = require('@craco/craco');

const myNewWebpackAssetModule = {
  test: /\.png/,
  type: 'asset/resource',
};

addBeforeAssetModule(
  webpackConfig,
  assetModuleByName('asset/source'),
  myNewWebpackAssetModule
);

addBeforeAssetModules​

addBeforeAssetModules(webpackConfig: WebpackConfig, matcher: AssetModuleMatcher, newAssetModule: 规则)

在 Webpack 配置中，向 matcher 返回 true 的所有资产模块之前添加新的资产模块。

返回类型​

{
  isAdded: boolean;
  addedCount: number;
}

用法​

const { addBeforeAssetModules, assetModuleByName } = require('@craco/craco');

const myNewWebpackAssetModule = {
  test: /\.png/,
  type: 'asset/resource',
};

addBeforeAssetModules(
  webpackConfig,
  assetModuleByName('asset/source'),
  myNewWebpackAssetModule
);

addAfterAssetModule​

addAfterAssetModule(webpackConfig: WebpackConfig, matcher: AssetModuleMatcher, newAssetModule: 规则)

在 Webpack 配置中，向 matcher 返回 true 的所有资产模块之后添加新的资产模块。

返回类型​

{
  isAdded: boolean;
}

用法​

const { addAfterAssetModule, assetModuleByName } = require('@craco/craco');

const myNewWebpackAssetModule = {
  test: /\.png/,
  type: 'asset/resource',
};

addAfterAssetModule(
  webpackConfig,
  assetModuleByName('asset/source'),
  myNewWebpackAssetModule
);

addAfterAssetModules​

addAfterAssetModules(webpackConfig: WebpackConfig, matcher: AssetModuleMatcher, newAssetModule: 规则)

在 Webpack 配置中，向 matcher 返回 true 的所有资产模块之后添加新的资产模块。

返回类型​

{
  isAdded: boolean;
  addedCount: number;
}

用法​

const { addAfterAssetModules, assetModuleByName } = require('@craco/craco');

const myNewWebpackAssetModule = {
  test: /\.png/,
  type: 'asset/resource',
};

addAfterAssetModules(
  webpackConfig,
  assetModuleByName('asset/source'),
  myNewWebpackAssetModule
);

removeAssetModules​

removeAssetModules(webpackConfig: WebpackConfig, matcher: AssetModuleMatcher)

从 Webpack 配置中移除 matcher 返回 true 的所有资产模块。

返回类型​

{
  hasRemovedAny: boolean;
  removedCount: number;
}

用法​

const { removeAssetModules, assetModuleByName } = require('@craco/craco');

removeAssetModules(webpackConfig, assetModuleByName('asset/source'));

引用​

WebpackConfig​

请参阅 https://webpack.js.cn/configuration/。

AssetModuleMatcher​

如果提供的资产模块（在一项规则中）匹配指定条件，则资产模块匹配器应返回 true。函数的类型为以下类型

(rule: Rule) => boolean;

规则​

请参阅 https://webpack.js.cn/configuration/module/#rule。