or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-extract-loader

Webpack loader to extract HTML and CSS from the bundle by evaluating source code in a fake context

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/extract-loader@3.2.x

To install, run

npx @tessl/cli install tessl/npm-extract-loader@3.2.0

index.mddocs/

Extract Loader

Extract Loader is a webpack loader that extracts HTML and CSS from the bundle by evaluating source code in a fake context and returning the result as a string. It serves as a lean alternative to extract-text-webpack-plugin and mini-css-extract-plugin, specifically designed to work with html-loader and css-loader to resolve URLs within HTML and CSS files.

Package Information

  • Package Name: extract-loader
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install extract-loader --save-dev

Core Imports

Extract-loader is used as a webpack loader, not directly imported in code:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'file-loader',
          'extract-loader',
          'css-loader'
        ]
      }
    ]
  }
};

Basic Usage

Extracting CSS Files

// webpack.config.js
module.exports = ({ mode }) => {
  const loaders = [{
    loader: "css-loader",
    options: {
      sourceMap: true
    }
  }];

  if (mode === "production") {
    loaders.unshift(
      "file-loader",
      "extract-loader"
    );
  } else {
    loaders.unshift("style-loader");
  }

  return {
    mode,
    entry: require.resolve("./app/main.css"),
    module: {
      rules: [
        {
          test: /\.css$/,
          use: loaders
        }
      ]
    }
  };
};

Extracting HTML Files

// webpack.config.js
module.exports = {
  entry: [
    require.resolve("./app/main.js"),
    require.resolve("./app/index.html")
  ],
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          "file-loader",
          "extract-loader",
          {
            loader: "html-loader",
            options: {
              attrs: ["img:src", "link:href"]
            }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          "file-loader", 
          "extract-loader",
          "css-loader"
        ]
      }
    ]
  }
};

Architecture

Extract-loader operates by:

  1. Fake Context Execution: Creates a fake VM context to safely evaluate processed source code
  2. Dependency Resolution: Resolves and processes nested dependencies (CSS imports, HTML resources)
  3. Code Transformation: Uses Babel to transform ES6+ code to CommonJS for evaluation with specific preset configuration:
    • babel-preset-env targeting current Node.js version
    • babel-plugin-add-module-exports for CommonJS interoperability
    • babelrc: false to ignore project babel configuration
  4. Result Extraction: Extracts the final result as a string that can be emitted by file-loader

Capabilities

Core Loader Function

The main webpack loader function that processes source code in a fake context.

/**
 * Webpack loader function that extracts content by evaluating source in a fake context
 * @param {string} src - Source code to process
 * @this {LoaderContext} Webpack loader context (required)
 * @returns {void} Uses webpack's async callback pattern via this.async()
 */
async function extractLoader(src);

Loader Options

Configuration options passed to the extract-loader.

interface ExtractLoaderOptions {
  /**
   * Public path for handling relative paths when extracting to different locations
   * Can be a string or function that receives the loader context
   */
  publicPath?: string | ((context: LoaderContext) => string);
}

Usage with string publicPath:

{
  loader: "extract-loader",
  options: {
    publicPath: "../"
  }
}

Usage with function publicPath:

{
  loader: "extract-loader", 
  options: {
    publicPath: (context) => '../'.repeat(
      path.relative(path.resolve('src'), context.context)
        .split('/').length
    )
  }
}

Webpack Integration

Extract-loader integrates with webpack's loader system and expects to be used in a loader chain.

/**
 * Webpack LoaderContext interface (subset used by extract-loader)
 */
interface LoaderContext {
  /** Mark the loader result as cacheable */
  cacheable(): void;
  /** Get async callback for returning results */
  async(): (error: Error | null, result?: string) => void;
  /** Add file as dependency for webpack watching */
  addDependency(file: string): void;
  /** Load module through webpack's module system */
  loadModule(request: string, callback: (error: Error | null, source?: string) => void): void;
  /** Absolute path to the resource being processed */
  resourcePath: string;
  /** Directory containing the resource being processed */
  context: string;
  /** Webpack options/configuration */
  options: object;
  /** Webpack 4+ compilation object (may be undefined in older versions) */
  _compilation?: {
    outputOptions?: { publicPath?: string };
  };
}

Usage Examples

Source Maps Support

Enable source maps by configuring css-loader:

{
  test: /\.css$/,
  use: [
    "file-loader",
    "extract-loader", 
    {
      loader: "css-loader",
      options: {
        sourceMap: true
      }
    }
  ]
}

Dynamic Import Patterns

// Programmatic usage pattern
import stylesheetUrl from "file-loader!extract-loader!css-loader!./main.css";
// stylesheetUrl contains the hashed URL to the final stylesheet

Multi-Environment Configuration

module.exports = (env, argv) => {
  const isDevelopment = argv.mode === 'development';
  
  return {
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            ...(isDevelopment 
              ? ['style-loader'] 
              : ['file-loader', 'extract-loader']
            ),
            'css-loader'
          ]
        }
      ]
    }
  };
};

Compatibility

  • Node.js: >= 6.0.0
  • Webpack: 4+ (tested with webpack 4.17.1)
  • Loaders: Designed to work with html-loader and css-loader
  • Dependencies:
    • babel-core (code transformation)
    • babel-preset-env (ES6+ to CommonJS transformation)
    • babel-plugin-add-module-exports (CommonJS interoperability)
    • loader-utils (webpack loader utilities)
    • resolve (module resolution)
    • btoa (base64 encoding)
    • vm (Node.js built-in for context execution)