Utility functions for Webpack asset modules
const { assetModuleByName, getAssetModule, getAssetModules, addBeforeAssetModule, addBeforeAssetModules, addAfterAssetModule, addAfterAssetModules, removeAssetModules,} = require('@craco/craco');FunctionsassetModuleByNameassetModuleByName(targetAssetModuleName: string): AssetModuleMatcher
Returns an asset module matcher function to be used with other asset module utility functions to match a name to an existing asset module.
getAssetModulegetAssetModule(webpackConfig: WebpackConfig, matcher: AssetModuleMatcher)
Retrieve the first asset module for which the matcher returns true from the Webpack config.
Return Type{ isFound: boolean; match: {rule: Rule;index: number; }}Usageconst { getAssetModule, assetModuleByName } = require('@craco/craco');const { isFound, match } = getAssetModule( webpackConfig, assetModuleByName('asset/source'));if (isFound) { // do stuff...}getAssetModulesgetAssetModules(webpackConfig: WebpackConfig, matcher: AssetModuleMatcher)
Retrieve all of the asset modules for which the matcher returns true from the Webpack config.
Return Type{ hasFoundAny: boolean; matches: [{ rule: Rule; index: number;} ]}Usageconst { getAssetModules, assetModuleByName } = require('@craco/craco');const { hasFoundAny, matches } = getAssetModules( webpackConfig, assetModuleByName('asset/inline'));if (hasFoundAny) { matches.forEach((x) => {// do stuff... });}addBeforeAssetModuleaddBeforeAssetModule(webpackConfig: WebpackConfig, matcher: AssetModuleMatcher, newAssetModule: Rule)
Add a new asset module before the asset module for which the matcher returns true in the Webpack config.
Return Type{ isAdded: boolean;}Usageconst { addBeforeAssetModule, assetModuleByName } = require('@craco/craco');const myNewWebpackAssetModule = { test: /\.png/, type: 'asset/resource',};addBeforeAssetModule( webpackConfig, assetModuleByName('asset/source'), myNewWebpackAssetModule);addBeforeAssetModulesaddBeforeAssetModules(webpackConfig: WebpackConfig, matcher: AssetModuleMatcher, newAssetModule: Rule)
Add a new asset module before all of the asset modules for which the matcher returns true in the Webpack config.
Return Type{ isAdded: boolean; addedCount: number;}Usageconst { addBeforeAssetModules, assetModuleByName } = require('@craco/craco');const myNewWebpackAssetModule = { test: /\.png/, type: 'asset/resource',};addBeforeAssetModules( webpackConfig, assetModuleByName('asset/source'), myNewWebpackAssetModule);addAfterAssetModuleaddAfterAssetModule(webpackConfig: WebpackConfig, matcher: AssetModuleMatcher, newAssetModule: Rule)
Add a new asset module after the asset module for which the matcher returns true in the Webpack config.
Return Type{ isAdded: boolean;}Usageconst { addAfterAssetModule, assetModuleByName } = require('@craco/craco');const myNewWebpackAssetModule = { test: /\.png/, type: 'asset/resource',};addAfterAssetModule( webpackConfig, assetModuleByName('asset/source'), myNewWebpackAssetModule);addAfterAssetModulesaddAfterAssetModules(webpackConfig: WebpackConfig, matcher: AssetModuleMatcher, newAssetModule: Rule)
Add a new asset module after all of the asset modules for which the matcher returns true in the Webpack config.
Return Type{ isAdded: boolean; addedCount: number;}Usageconst { addAfterAssetModules, assetModuleByName } = require('@craco/craco');const myNewWebpackAssetModule = { test: /\.png/, type: 'asset/resource',};addAfterAssetModules( webpackConfig, assetModuleByName('asset/source'), myNewWebpackAssetModule);removeAssetModulesremoveAssetModules(webpackConfig: WebpackConfig, matcher: AssetModuleMatcher)
Remove all of the asset modules for which the matcher returns true from the Webpack config.
Return Type{ hasRemovedAny: boolean; removedCount: number;}Usageconst { removeAssetModules, assetModuleByName } = require('@craco/craco');removeAssetModules(webpackConfig, assetModuleByName('asset/source'));ReferenceWebpackConfigSee https://webpack.js.org/configuration/.
AssetModuleMatcherAn asset module matcher should return true if the provided asset module (within a rule) matches the specified criteria. The function is of the following type:
(rule: Rule) => boolean;RuleSee https://webpack.js.org/configuration/module/#rule.