or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.mdloader-configuration.mdplugin-configuration.md
tile.json

index.mddocs/

Extract Text Webpack Plugin

Extract Text Webpack Plugin is a webpack plugin that extracts text content (typically CSS) from JavaScript bundles into separate files during the webpack build process. It provides a comprehensive solution for code splitting stylesheets, enabling developers to separate CSS from JavaScript bundles for better caching, reduced bundle sizes, and improved loading performance.

Package Information

  • Package Name: extract-text-webpack-plugin
  • Package Type: npm
  • Language: JavaScript (ES6/ES2015)
  • Installation: npm install --save-dev extract-text-webpack-plugin
  • Webpack Version: 3.x (requires webpack ^3.1.0)

Core Imports

const ExtractTextPlugin = require("extract-text-webpack-plugin");

For ES6 modules (source):

import ExtractTextPlugin from "extract-text-webpack-plugin";

Basic Usage

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css")
  ]
};

Architecture

Extract Text Webpack Plugin is built around several key components:

  • Plugin Class: ExtractTextPlugin - Main webpack plugin that orchestrates text extraction
  • Loader System: Webpack loader that handles extraction during module processing
  • Child Compilation: Creates isolated webpack compilations for processing extracted content
  • Module Management: Tracks and organizes extracted modules across chunks
  • Asset Generation: Produces final extracted text files as webpack assets

Capabilities

Plugin Configuration

Main plugin class for configuring and applying text extraction to webpack builds. Supports flexible filename patterns, chunk handling, and extraction control.

/**
 * Extract Text Webpack Plugin constructor
 * @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;
}

Plugin Configuration

Loader Configuration

Static and instance methods for creating loader configurations that work with the extraction system. Handles fallback loaders, loader chains, and extraction options.

/**
 * Creates extracting loader configuration (static method)
 * @param {string|array|object} options - Loader configuration
 * @returns {array} Array of loader objects
 */
ExtractTextPlugin.extract(options);

/**
 * Creates basic loader configuration (static method)
 * @param {object} options - Loader options
 * @returns {object} Loader configuration object
 */
ExtractTextPlugin.loader(options);

interface ExtractOptions {
  /** Loaders for processing the resource (required) */
  use: string | string[] | object | object[];
  /** Fallback loaders when CSS not extracted */
  fallback?: string | string[] | object | object[];
  /** Override output public path */
  publicPath?: string;
  /** Remove extracted content from bundle */
  remove?: boolean;
  /** Number of loaders to omit from chain */
  omit?: number;
}

Loader Configuration

Types

/**
 * Webpack loader configuration object
 */
interface LoaderObject {
  loader: string;
  options?: object;
}

/**
 * Function signature for dynamic filename generation
 */
type FilenameFunction = (getPath: (format: string) => string) => string;

/**
 * Webpack chunk object (from webpack internals)
 */
interface WebpackChunk {
  name: string;
  id: string | number;
  files: string[];
  isInitial(): boolean;
  parents: WebpackChunk[];
}