Plugin configuration for ExtractTextPlugin, covering constructor options, instance methods, and webpack integration patterns.
Creates a new ExtractTextPlugin instance with specified configuration options.
/**
* Creates a new ExtractTextPlugin instance
* @param {string|object} options - Configuration options or filename string
*/
function ExtractTextPlugin(options);
interface ExtractTextPluginOptions {
/** Output filename pattern, supports [name], [id], [contenthash] placeholders */
filename: string | ((getPath: (format: string) => string) => string);
/** Unique identifier for plugin instance (auto-generated if omitted) */
id?: string | number;
/** Extract from all chunks, not just initial chunks */
allChunks?: boolean;
/** Disable the plugin */
disable?: boolean;
/** Ignore CSS module dependency order warnings */
ignoreOrder?: boolean;
}Usage Examples:
// Simple filename string
const extractCSS = new ExtractTextPlugin("styles.css");
// With placeholders
const extractCSS = new ExtractTextPlugin("[name].[contenthash].css");
// With full options
const extractCSS = new ExtractTextPlugin({
filename: "styles/[name].css",
allChunks: true,
ignoreOrder: true
});
// With dynamic filename function
const extractCSS = new ExtractTextPlugin({
filename: (getPath) => {
return getPath("[name].css").replace(/\.js$/, ".css");
},
allChunks: true
});The filename option supports several placeholder patterns for dynamic naming:
[name] - Name of the chunk[id] - ID number of the chunk[contenthash] - Hash of the extracted file content[<hashType>:contenthash:<digestType>:<length>] - Configurable hash optionsHash Configuration Examples:
// Different hash types and formats
new ExtractTextPlugin("[name].[sha256:contenthash:hex:8].css");
new ExtractTextPlugin("[name].[md5:contenthash:base64:6].css");Creates an extracting loader configuration bound to the plugin instance.
/**
* Creates extracting loader configuration for this plugin instance
* @param {string|array|object} options - Loader configuration
* @returns {array} Array of loader objects
*/
extract(options);Usage Examples:
const extractCSS = new ExtractTextPlugin("styles.css");
// Use with webpack rule
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: extractCSS.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [extractCSS]
};Creates a basic loader configuration bound to the plugin instance.
/**
* Creates loader configuration for this plugin instance
* @param {object} options - Loader options
* @returns {object} Loader configuration object
*/
loader(options);Webpack plugin interface method that applies the plugin to a webpack compiler.
/**
* Applies plugin to webpack compiler (called automatically by webpack)
* @param {object} compiler - Webpack compiler instance
*/
apply(compiler);When true, extracts text from all chunks including non-initial chunks. When false (default), only extracts from initial chunks.
// Extract from all chunks (required when using CommonsChunkPlugin)
new ExtractTextPlugin({
filename: "styles.css",
allChunks: true
});Completely disables the plugin when true. Useful for conditional extraction based on environment.
// Disable in development
new ExtractTextPlugin({
filename: "styles.css",
disable: process.env.NODE_ENV === "development"
});Disables CSS module dependency order warnings when true. Useful when using CSS Modules.
// Ignore order warnings for CSS Modules
new ExtractTextPlugin({
filename: "styles.css",
ignoreOrder: true
});Error Handling: When ignoreOrder is false (default), the plugin may emit OrderUndefinedError warnings to the webpack compilation when CSS module dependencies have conflicting order requirements. These warnings indicate potential issues with CSS rule precedence but do not stop the build process.
Unique identifier for the plugin instance. Auto-generated if not provided. Required when using multiple ExtractTextPlugin instances.
// Multiple extraction instances
const extractMainCSS = new ExtractTextPlugin({
filename: "main.css",
id: "main"
});
const extractVendorCSS = new ExtractTextPlugin({
filename: "vendor.css",
id: "vendor"
});The following methods are part of the internal API but may be relevant for advanced usage or plugin extensions:
Applies additional information (such as media queries) to extracted source content.
/**
* Applies additional information to source content
* @param {object} source - Source content object
* @param {array} info - Additional information array (e.g., media query data)
* @returns {object} Modified source with additional information applied
*/
applyAdditionalInformation(source, info);Merges non-initial chunks into initial chunks for extraction processing.
/**
* Merges non-initial chunks into initial chunks
* @param {object} chunk - Source chunk to merge from
* @param {object} intoChunk - Target chunk to merge into (optional)
* @param {array} checkedChunks - Array of already processed chunks (optional)
*/
mergeNonInitialChunks(chunk, intoChunk, checkedChunks);Renders the final extracted content from a chunk.
/**
* Renders extracted content from a webpack chunk
* @param {object} chunk - Webpack chunk containing extracted modules
* @returns {object} Concatenated source object with all extracted content
*/
renderExtractedChunk(chunk);Webpack plugin interface method that applies the plugin to a webpack compiler.
/**
* Applies plugin to webpack compiler (webpack plugin interface)
* @param {object} compiler - Webpack compiler instance
*/
apply(compiler);When using multiple ExtractTextPlugin instances, each must have a unique id:
const extractMainCSS = new ExtractTextPlugin({
filename: "css/main.[contenthash].css",
id: "main"
});
const extractVendorCSS = new ExtractTextPlugin({
filename: "css/vendor.[contenthash].css",
id: "vendor"
});
module.exports = {
module: {
rules: [
{
test: /main\.css$/,
use: extractMainCSS.extract({
use: "css-loader"
})
},
{
test: /vendor\.css$/,
use: extractVendorCSS.extract({
use: "css-loader"
})
}
]
},
plugins: [
extractMainCSS,
extractVendorCSS
]
};