# webpack-contrib/extract-text-webpack-plugin

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/webpack-contrib-extract-text-webpack-plugin).**

3,992 stars · 508 forks · JavaScript · MIT · archived

## Links

- GitHub: https://github.com/webpack-contrib/extract-text-webpack-plugin
- awesome-repositories: https://awesome-repositories.com/repository/webpack-contrib-extract-text-webpack-plugin.md

## Topics

`webpack-plugin`

## Description

This project is a Webpack asset extraction plugin and build optimizer designed to separate CSS and static text assets from the main JavaScript bundle. It functions as a tool for moving text content into standalone external files to reduce the size of the primary execution bundle.

The plugin specifically provides capabilities for CSS extraction, moving styles into separate files to prevent them from blocking the primary JavaScript execution. It enables the generation of several distinct output files for different asset types through the use of multiple plugin instances.

The system covers asset management through custom extraction loaders and dynamic output filename customization. It utilizes a pipeline that intercepts module output to redirect text content into dedicated external files during the bundling process.

## Tags

### Development Tools & Productivity

- [CSS Bundle Extractions](https://awesome-repositories.com/f/development-tools-productivity/source-bundling/css-bundle-extractions.md) — Extracts CSS styles from JavaScript bundles into standalone files to prevent them from blocking primary execution.
- [Webpack Build Plugins](https://awesome-repositories.com/f/development-tools-productivity/asset-compilation-pipelines/webpack-build-plugins.md) — Integrates into the Webpack lifecycle to move text content from bundled files into separate external files.
- [Bundle Content Extraction](https://awesome-repositories.com/f/development-tools-productivity/bundle-content-extraction.md) — Moves text content from bundled files into external files to reduce the size of the primary execution bundle. ([source](https://github.com/webpack-contrib/extract-text-webpack-plugin#readme))
- [Webpack Loaders](https://awesome-repositories.com/f/development-tools-productivity/asset-compilation-pipelines/webpack-loaders.md) — Configures the extraction and naming of text resources using Webpack loaders during the bundling process.
- [Build Optimization](https://awesome-repositories.com/f/development-tools-productivity/build-optimization.md) — Optimizes delivery by separating static text assets from the main execution JavaScript bundle to reduce size.
- [Multiple Extraction Targets](https://awesome-repositories.com/f/development-tools-productivity/multiple-extraction-targets.md) — Supports generating several distinct output files for different asset types through multiple plugin instances. ([source](https://github.com/webpack-contrib/extract-text-webpack-plugin/blob/master/README.md))
- [Output Path Customization](https://awesome-repositories.com/f/development-tools-productivity/output-path-customization.md) — Enables definition of naming conventions for extracted files using static strings or dynamic path-processing functions. ([source](https://github.com/webpack-contrib/extract-text-webpack-plugin#readme))

### Game Development

- [Static Asset De-bundling](https://awesome-repositories.com/f/game-development/asset-bundle-extraction/static-asset-de-bundling.md) — Takes specific text content out of bundled modules and places it into dedicated external files.

### Software Engineering & Architecture

- [Module Loaders](https://awesome-repositories.com/f/software-engineering-architecture/dynamic-module-loaders/module-loaders.md) — Utilizes custom loaders to intercept and transform module output, redirecting text content into external asset pipelines.
- [Custom Resource Loaders](https://awesome-repositories.com/f/software-engineering-architecture/plugin-architectures/programmatic-plugin-loading/custom-resource-loaders.md) — Provides specialized resource loaders that convert assets into exportable modules with configurable fallback behaviors. ([source](https://github.com/webpack-contrib/extract-text-webpack-plugin/blob/master/README.md))
- [Build Asset Generation](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/plugin-module-systems/modular-plugin-architectures/plugin-based-architectures/asset-generation-plugins/build-asset-generation.md) — Hooks into the compiler lifecycle to create new output files based on extracted module data.
- [Extraction Fallbacks](https://awesome-repositories.com/f/software-engineering-architecture/module-loading-systems/extraction-fallbacks.md) — Implements a fallback system to switch between external files and inline styles based on extraction status.
- [Asset Target Isolation](https://awesome-repositories.com/f/software-engineering-architecture/service-instance-managers/redis-instance-sharers/multi-instance-configurations/asset-target-isolation.md) — Supports isolating different asset types into distinct output files through multiple plugin configurations.

### User Interface & Experience

- [Build-Time CSS Extraction](https://awesome-repositories.com/f/user-interface-experience/ui-styling/embedded-style-parsing/style-extraction/build-time-css-extraction.md) — Extracts CSS styles from Webpack bundles into standalone files during the build process for faster loading.

### Web Development

- [Frontend Performance Optimization](https://awesome-repositories.com/f/web-development/frontend-performance-optimization.md) — Reduces main JavaScript bundle size by separating static text and style content into external files for better performance.