extract-loader

5.1.0 verified Sat Apr 25 auth: no javascript maintenance

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.

Common errors

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

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

fix

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

error Error: Cannot find module 'babel-loader' ↓

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

fix

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

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

cause 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.

Warnings

breaking v5.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.

deprecated extract-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.

gotcha extract-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.

gotcha The order of loaders matters: file-loader must come before extract-loader. ↓

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

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

fix Upgrade Node to 6+ or use v3.1.0.

Install

npm install extract-loader

yarn add extract-loader

pnpm add extract-loader

Imports

extract-loader
wrong
```
import extractLoader from 'extract-loader'
```
correct
```
import 'extract-loader'
```
The loader is used as a string in webpack config, not imported as a module.
extract-loader (loader rule)
wrong
```
use: ['file-loader', { loader: 'extract-loader' }]
```
correct
```
use: ['extract-loader']
```
In webpack config, use as a string in the use array. Options are passed via query or use object.

file-loader

wrong

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

correct

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

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

Quickstart

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') %>">