Webpack 加载器

用于 Webpack 加载器 的实用程序函数

const {
  loaderByName,
  getLoader,
  getLoaders,
  addBeforeLoader,
  addBeforeLoaders,
  addAfterLoader,
  addAfterLoaders,
  removeLoaders,
} = require('@craco/craco');

函数

loaderByName

loaderByName(targetLoaderName: string): LoaderMatcher

返回 加载器匹配器 函数，以便与其他加载器实用程序函数一起使用，并将名称与现有加载器匹配。

getLoader

getLoader(webpackConfig: WebpackConfig, matcher: LoaderMatcher)

从 Webpack 配置中获取匹配器返回为 true 的第一个加载器。

返回类型

{
  isFound: boolean;
  match: {
    loader: Rule;
    parent: Rule[];
    index: number;
  }
}

用法

const { getLoader, loaderByName } = require('@craco/craco');

const { isFound, match } = getLoader(
  webpackConfig,
  loaderByName('eslint-loader')
);

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

getLoaders

getLoaders(webpackConfig: WebpackConfig, matcher: LoaderMatcher)

从 Webpack 配置中获取匹配器返回为 true 的所有加载器。

返回类型

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

用法

const { getLoaders, loaderByName } = require('@craco/craco');

const { hasFoundAny, matches } = getLoaders(
  webpackConfig,
  loaderByName('babel-loader')
);

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

addBeforeLoader

addBeforeLoader(webpackConfig: WebpackConfig, matcher: LoaderMatcher, newLoader: Rule)

在 Webpack 配置中，将新加载器添加到匹配器返回为 true 的加载器之前。

返回类型

{
  isAdded: boolean;
}

用法

const { addBeforeLoader, loaderByName } = require('@craco/craco');

const myNewWebpackLoader = {
  loader: require.resolve('tslint-loader'),
};

addBeforeLoader(
  webpackConfig,
  loaderByName('eslint-loader'),
  myNewWebpackLoader
);

addBeforeLoaders

addBeforeLoaders(webpackConfig: WebpackConfig, matcher: LoaderMatcher, newLoader: Rule)

添加一个新加载器**在所有**加载器前面，其中，webpack 配置中，匹配器返回 true。

返回类型

{
  isAdded: boolean;
  addedCount: number;
}

用法

const { addBeforeLoaders, loaderByName } = require('@craco/craco');

const myNewWebpackLoader = {
  loader: require.resolve('tslint-loader'),
};

addBeforeLoaders(
  webpackConfig,
  loaderByName('eslint-loader'),
  myNewWebpackLoader
);

addAfterLoader

addAfterLoader(webpackConfig: WebpackConfig, matcher: LoaderMatcher, newLoader: Rule)

添加一个新加载器**在** webpack 配置中，匹配器返回 true 的加载器后面。

返回类型

{
  isAdded: boolean;
}

用法

const { addAfterLoader, loaderByName } = require('@craco/craco');

const myNewWebpackLoader = {
  loader: require.resolve('tslint-loader'),
};

addAfterLoader(
  webpackConfig,
  loaderByName('eslint-loader'),
  myNewWebpackLoader
);

addAfterLoaders

addAfterLoaders(webpackConfig: WebpackConfig, matcher: LoaderMatcher, newLoader: Rule)

添加一个新加载器**在所有**加载器后面，其中，webpack 配置中，匹配器返回 true。

返回类型

{
  isAdded: boolean;
  addedCount: number;
}

用法

const { addAfterLoaders, loaderByName } = require('@craco/craco');

const myNewWebpackLoader = {
  loader: require.resolve('tslint-loader'),
};

addAfterLoaders(
  webpackConfig,
  loaderByName('eslint-loader'),
  myNewWebpackLoader
);

removeLoaders

removeLoaders(webpackConfig: WebpackConfig, matcher: LoaderMatcher)

从 webpack 配置中，删除**所有**匹配器返回 true 的加载器。

返回类型

{
  hasRemovedAny: boolean;
  removedCount: number;
}

用法

const { removeLoaders, loaderByName } = require('@craco/craco');

removeLoaders(webpackConfig, loaderByName('eslint-loader'));

参考

WebpackConfig

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

LoaderMatcher

当所提供的加载器（在一个规则中）符合指定条件时，加载器匹配器应当返回 true。函数类型如下所示

(rule: Rule) => boolean;

Rule

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