extract-loader

library5.1.0jsnpmunverified

A webpack loader that evaluates source code on the fly and returns it as a string, primarily used to extract HTML and CSS from the bundle. Version 5.1.0 is the latest stable release, with slow updates since 2020. It resolves URLs within HTML and CSS, serving as a lean alternative to extract-text-webpack-plugin and mini-css-extract-plugin. It works specifically with code generated by html-loader or css-loader, providing a fake context for evaluation.

devops

npm install extract-loader

github ↗package ↗

INSTALL

IMPORT

SIG · EXTRACT-LOADER

extract-loader

devopsjavascriptv5.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

extract-loader

✓ import 'extract-loader'

✗ import extractLoader from 'extract-loader'

The loader is used as a string in webpack config, not imported as a module.

extract-loader (loader rule)

✓ use: ['extract-loader']

✗ use: ['file-loader', { loader: 'extract-loader' }]

In webpack config, use as a string in the use array. Options are passed via query or use object.

file-loader

✓ import url from 'file-loader!extract-loader!css-loader!./file.css'

✗ import url from 'extract-loader!css-loader!./file.css'

extract-loader alone does not write files; it must be combined with file-loader to output the result.

Demonstrates using extract-loader with file-loader and css-loader to extract CSS as a separate file for production.

// webpack.config.js module.exports = { entry: './src/main.css', module: { rules: [ { test: /\.css$/, use: [ 'file-loader', 'extract-loader', { loader: 'css-loader', options: { sourceMap: true } } ] } ] } }; // In HTML, include generated CSS file <link rel="stylesheet" href="<%= require('file-loader!extract-loader!css-loader!./main.css') %>">

Debug

Known issues

breakingv5.0.0 introduced Babel dependency for ES module support, requiring Node >= 6.0.0.

fix

Ensure Node is 6+ and install babel-loader as a dependency.

affects: >=5.0.0 <6.0.0

deprecatedextract-loader is in maintenance mode; consider using mini-css-extract-plugin for CSS extraction.

fix

Switch to mini-css-extract-plugin (for CSS) or handle HTML extraction differently.

affects: >=5.0.0

gotchaextract-loader only works with code from html-loader or css-loader; custom code may fail.

fix

Ensure the loaded resource is processed by html-loader or css-loader before extraction.

affects: >=1.0.0

gotchaThe order of loaders matters: file-loader must come before extract-loader.

fix

Use use: ['file-loader', 'extract-loader', ...] in webpack config.

affects: >=1.0.0

deprecatedNode 6 support removed in v4.0.0; v3.x supports Node 6.

fix

Upgrade Node to 6+ or use v3.1.0.

affects: >=4.0.0

Errors

Common errors & fixes

Module build failed: Error: extract-loader can only be used after file-loader

Loader order is incorrect; file-loader must precede extract-loader.

fix

Reorder loaders: use ['file-loader', 'extract-loader', 'css-loader']

Error: Cannot find module 'babel-loader'

extract-loader v5+ requires babel-loader to transpile ES modules.

fix

Install babel-loader: npm install --save-dev babel-loader

TypeError: Cannot read properties of undefined (reading 'indexOf')

extract-loader encountered non-standard code (e.g., not from css/html-loader).

fix

Ensure the loaded module is CSS or HTML processed by respective loaders.

Upgrade

Version history

5.1.0latest on npm

Audit

Dependencies

babel-loaderrequiredRequired for transpiling ES module output from file-loader since v5.0.0

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/peerigon/extract-loader ↗

packagehttps://www.npmjs.com/package/extract-loader ↗