Webpack Replace Class Names

Replace all CSS class name's and id's based on given match array.

Example how to use it in webpack

const WebpackReplaceClassNames = require('webpack-replace-class-names');
const matchesFile = ${__dirname}/extracted-names-for-js;

if(!fs.existsSync(matchesFile))
{
throw new Error(The required file cannot be found: ${matchesFile});
}

let matches = [];
try{
matches = fs.readFileSync(matchesFile, 'UTF-8');
matches = JSON.parse(matches);
}
catch(e)
{
throw new Error(e);
}

const config = {
resolve: {
extensions: ['.ts', '.js', '.tsx'],
},
cache: ....,
entry: ...,
output: ....,
module: {
rules: [
....
]
},
externals: {....},
plugins: [
....
new WebpackReplaceClassNames(
{
matches,
restModulo: 10000,
restTime: 200,
displayResult: false,
ignore: [],
attributes: [],
forceReplace: [
{
find: '_App',
type: 'id'
},
{
find: '_Generator',
type: 'id'
}
],
logger: {
logging: true,
prefix: 'Replace',
displayFilename: true,
displayPercentage: true,
type: 'bar',
barBg: 'bgCyan'
},
}
)
]
};

Example of HTML file content before replacement

Example of HTML file content after replacement

Limitations

Only Modules there are generated from the base path (not node_modules) are replaced. Modules imported from node_modules are not replaced. External module names has to be in the "ignore" list.

This module are based on the 2 other modules

Extract class and id names from css file

extract-css-names

Replace class and id names in css files based on the "extract-css-names" module.

replace-css-names

WebpackReplaceClassNames options

| Option | type | Description
| --------------- | ------- | ------------- |
| matches | array | Array of objects: [ { find: string; replace: string; type: string;}, ... ]
| attributes | array | Array of strings/atrribute names to replace. Default [ 'className', 'id' ]
| forceReplace | array | Array of strings. If sensitive match, does not replace a class or id, you can force it ( the forced name has to be availbale in the matches array). Structure [ { find: string; type: string } ]
| restModulo | number | Each number of lines should be made a break
| restTime | number | Duration of the break in ms
| displayResult | boolean | Display the replace result in the terminal
| ignore | array | Ignore names to replace
| logger | object | Logger options

WebpackReplaceClassNames logger options

| Option | type | Description
| ------------------- | ------- | ------------- |
| logging | boolean | Display current process
| prefix | string | Prefix on the logging line
| displayFilename | boolean | Display current processed filename (filename extracted from path)
| displayPercentage | boolean | Display current percentage value
| type | string | Process animation type. Available types: 'spinner', 'bar', 'dots', 'dots2', 'arc', 'line'
| barBg | string | If the animation type is bar, then set the bar's background-color. Background colors are based on the chalk module

Maintainer

David Janitzek