CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-extract-loader

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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)
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/extract-loader@3.2.x
Publish Source
CLI
Badge
tessl/npm-extract-loader badge