Webpack Ignore Loader

0.1.2 · abandoned · verified Sun Apr 19

ignore-loader is a Webpack loader designed to prevent specified files from being processed and bundled by Webpack. It achieves this by essentially replacing the content of matched modules with an empty string, effectively omitting them from the final build output. First published 9 years ago and last updated in 2017 (version 0.1.2), it is considered an abandoned package. This loader is primarily relevant for older Webpack configurations (versions 1-3) that utilized the `module.loaders` array syntax, as modern Webpack (versions 4+) uses `module.rules`. It doesn't receive new features or bug fixes, and its utility is largely superseded by more flexible configuration options or newer community loaders.

Common errors

```
ERROR in Configuration has an unknown property 'loaders'. These properties are valid: ...
```
cause Using `module.loaders` (an older Webpack configuration syntax) in Webpack version 4 or newer.

fix Update your Webpack configuration to use `module.rules` instead of `module.loaders`. This `ignore-loader` package is specifically for older Webpack versions and will not work with `module.rules` directly without an adapter or wrapper.
```
Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type...
```
cause Attempting to `require()` or `import` `ignore-loader` directly into JavaScript code, or using it incorrectly in `webpack.config.js` for an older Webpack version where the loader itself fails to transform the module.

fix Ensure `ignore-loader` is only referenced as a string within the `module.loaders` array of your `webpack.config.js` (for Webpack 1-3). Loaders are processing steps, not modules to be imported into your application's runtime.

Warnings

breaking The `module.loaders` configuration array used by `ignore-loader` was deprecated in Webpack 2 and completely removed in Webpack 4. Using this loader or its configuration style with Webpack 4 or newer will result in configuration errors.
Fix: Migrate your Webpack configuration to use `module.rules` and `use` property, or find an alternative method for ignoring modules that is compatible with modern Webpack. For example, `null-loader` or `raw-loader` with an empty string return can achieve similar results in `module.rules`.
gotcha `ignore-loader` effectively removes the content of matched files from the bundle, but it does not remove references to those files in your source code. If your application code still attempts to import or use the ignored assets, it might lead to runtime errors (e.g., `Module not found`) if a subsequent loader or runtime expects the asset to be present.
Fix: Ensure that files ignored by `ignore-loader` are also not referenced by your application code, or implement conditional imports/requires that check for environment variables (e.g., `process.env.NODE_ENV === 'test'`).
deprecated This package is abandoned. Its last publish was 9 years ago (as of April 2026), and there has been no significant activity on its GitHub repository since 2017. It is not maintained, and there are no plans for updates or compatibility with newer Webpack versions.
Fix: Consider migrating to alternative solutions or a custom loader if you need similar functionality in a modern Webpack setup. Relying on abandoned packages can introduce security risks and compatibility issues in the long term.

Install

npm install ignore-loader npm
yarn add ignore-loader yarn
pnpm add ignore-loader pnpm

Imports

'ignore-loader'
wrong:
```
import ignoreLoader from 'ignore-loader'; // Loaders are referenced as strings in webpack.config.js, not imported as modules
require('ignore-loader'); // Not how loaders are consumed
```
correct:
```
module: { loaders: [{ test: /\.css$/, loader: 'ignore-loader' }] }
```
Loaders are referenced as string values in the `webpack.config.js` configuration file, specifically within the `module.loaders` array for older Webpack versions (1-3). They are not imported into JavaScript application code directly.

Loader configuration (Webpack 1-3)

wrong:

module: {
  rules: [
    { test: /\.(png|jpg|gif)$/, use: ['ignore-loader'] }
  ]
} // 'rules' and 'use' are for Webpack 4+; this loader uses 'loaders' and 'loader'

correct:

module: {
  loaders: [
    { test: /\.(png|jpg|gif)$/, loader: 'ignore-loader' }
  ]
}

This loader is designed for Webpack 1-3's `module.loaders` configuration. Modern Webpack (4+) uses `module.rules` and `use` for loaders, which is not compatible with this package's intended usage.

Quickstart

Demonstrates configuring `ignore-loader` in an older Webpack `webpack.config.js` to prevent CSS and specific image files from being bundled. This configuration utilizes the `module.loaders` syntax specific to Webpack versions 1-3.

/* webpack.config.js (for Webpack 1-3) */

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: require('path').resolve(__dirname, 'dist'),
  },
  module: {
    // This loader configuration is for Webpack versions 1, 2, or 3.
    // It will prevent any .css files from being processed or bundled.
    // They will effectively be ignored during the build.
    loaders: [
      { 
        test: /\.css$/,
        loader: 'ignore-loader'
      },
      // Example for ignoring specific images as well
      {
        test: /\.(png|jpg|gif)$/,
        include: require('path').resolve(__dirname, 'src/assets/ignored-images'),
        loader: 'ignore-loader'
      }
    ]
  },
  // For Webpack 4+, 'module.rules' is used instead of 'module.loaders'.
  // This loader is not recommended for modern Webpack versions.
};

view raw JSON →