Webpack Config Helpers

Table of Contents

• Basic Usage
• API
  • webpack
  • getLoaders
  • getRules
  • getPlugins
  • getRulesByMatchingFile
  • getLoadersByName
  • getPluginsByName
  • getPluginsByType

Basic Usage

/**
 * Function that mutates the original webpack config.
 * Supports asynchronous changes when a promise is returned (or it's an async function).
 *
 * @param {import('preact-cli').Config} config - original webpack config
 * @param {import('preact-cli').Env} env - current environment and options pass to the CLI
 * @param {import('preact-cli').Helpers} helpers - object with useful helpers for working with the webpack config
 * @param {Record<string, unknown>} options - this is mainly relevant for plugins (will always be empty in the config), default to an empty object
 */
export default (config, env, helpers, options) => {
	const webpack = helpers.webpack;
	const babelLoader = helpers.getLoadersByName(config, 'babel-loader')[0];
	...
};

API

webpack

Webpack module used to create config

Example

export default (config, env, helpers) => {
	const webpack = helpers.webpack;
};

Returns

typeof webpack

getLoaders(config)

Returns a wrapper around all loaders from the config

Parameters

• config Webpack configuration passed into preact.config.js

Example

export default (config, env, helpers) => {
	const loaders = helpers.getLoaders(config);
};

Returns

{
  rule: {
    test: RegExp;
    [key: string]: any;
  };
  ruleIndex: number;
  loaders:
    | string
    | (string | { loader: string; options: Record<string, any> })[];
}[]

getRules(config)

Returns a wrapper around all rules from the config

Parameters

• config Webpack configuration passed into preact.config.js

Example

export default (config, env, helpers) => {
	const rules = helpers.getRules(config);
};

Returns

{
  index: number;
  rule: {
    test: RegExp;
    [key: string]: any;
  };
}[]

getPlugins(config)

Returns a wrapper around all plugins from the config

Parameters

• config Webpack configuration passed into preact.config.js

Example

export default (config, env, helpers) => {
	const plugins = helpers.getPlugins(config);
};

Returns

{
  index: number;
  plugin: Record<string, any>;
}[]

getRulesByMatchingFile(config, file)

Returns a wrapper around all rules from the config that match the provided file

Parameters

• config Webpack configuration passed into preact.config.js
• file string file path to test against. Resolved relatively to $PWD

Example

export default (config, env, helpers) => {
	const matchingRules = helpers.getRulesByMatchingFile(config, 'src/index.js');
};

Returns

{
  index: number;
  rule: {
    test: RegExp;
    [key: string]: any;
  };
}[]

getLoadersByName(config, name)

Returns a wrapper around all loaders from the config that match the provided name

Parameters

• config Webpack configuration passed into preact.config.js
• name string name of loader

Example

export default (config, env, helpers) => {
	const babelLoader = helpers.getLoadersByName(config, 'babel-loader')[0];
};

Returns

{
  rule: {
    test: RegExp;
    [key: string]: any;
  };
  ruleIndex: number;
  loader:
    | string
    | {	loader: string;	options: Record<string, any>; }
  loaderIndex: number;
}[]

getPluginsByName(config, name)

Returns a wrapper around all plugins from the config that match the provided name

Parameters

• config Webpack configuration passed into preact.config.js
• name string name of plugin

Example

export default (config, env, helpers) => {
	const critters = helpers.getPluginsByName(config, 'Critters')[0];
};

Returns

{
  index: number;
  plugin: Record<string, any>;
}[]

getPluginsByType(config, type)

Returns a wrapper around all plugins from the config that match the provided type

Parameters

• config Webpack configuration passed into preact.config.js
• type any type of plugin

Example

export default (config, env, helpers) => {
	const webpack = helpers.webpack;
	const definePlugin = helpers.getPluginsByName(config, webpack.DefinePlugin)[0];
};

Returns

{
  index: number;
  plugin: Record<string, any>;
}[]