babel-plugin-webpack-loaders

0.9.0 verified Sat Apr 25 auth: no javascript deprecated

A Babel 6 plugin that allows using webpack loaders during Babel transpilation, enabling server-side use of CSS modules, image imports, and other webpack loader features without a full webpack build. Version 0.9.0 (last updated 2016) is the current stable release. Maintained primarily for legacy projects; the author strongly recommends migrating to modern alternatives like Jest with moduleNameMapper. Key differentiator: enables isomorphic/universal apps to run on the server without a separate build step. However, it's effectively deprecated in favor of Jest and babel-jest for testing, and Next.js or other frameworks for server-side rendering.

Common errors

error Error: Plugin babel-plugin-webpack-loaders could not be found ↓

cause Plugin not installed or not in node_modules.

fix

Install via npm: npm install babel-plugin-webpack-loaders --save-dev

error Error: Module not found: Error: Cannot resolve module 'style-loader' in ... ↓

cause Webpack loaders referenced in the webpack config are not installed.

fix

Install the missing loaders, e.g., npm install style-loader css-loader --save-dev

error TypeError: The 'compilation' argument must be an instance of Compilation ↓

cause Incompatible webpack version; plugin expects webpack 1.x or 2.x.

fix

Ensure webpack version is exactly ^1.12.9 || ^2.0.0 (i.e., <3.0.0).

Warnings

deprecated Plugin is effectively deprecated; author recommends using Jest with moduleNameMapper instead. ↓

fix Migrate to Jest and mock CSS/asset imports using identity-obj-proxy or similar.

breaking Requires webpack >=1.12.9 and <3.0.0; incompatible with webpack 3+ and Babel 7+. ↓

fix Downgrade webpack to version 2.x or use an alternative like babel-plugin-transform-imports.

gotcha Do not use this plugin in frontend webpack configurations; it is intended only for backend compilation. ↓

fix Only apply this plugin in Node.js/Babel environments, not in webpack's own configuration.

gotcha Plugin alpha quality; tested only with specific loaders (file-loader, url-loader, css-loader, style-loader, sass-loader, postcss-loader). Other loaders may not work. ↓

fix If using unsupported loaders, consider alternatives like webpack-isomorphic-tools or custom solutions.

gotcha BABEL_DISABLE_CACHE=1 environment variable often required to avoid stale cached results. ↓

fix Set BABEL_DISABLE_CACHE=1 in your environment before running Babel.

Install

npm install babel-plugin-webpack-loaders

yarn add babel-plugin-webpack-loaders

pnpm add babel-plugin-webpack-loaders

Imports

default plugin

Use in .babelrc as plugin name 'babel-plugin-webpack-loaders' or via JavaScript: require('babel-plugin-webpack-loaders')

This plugin is not imported in source code; it is installed as a Babel plugin via configuration.

Quickstart

Configure .babelrc with plugin pointing to a webpack config, then import CSS files in Node.js using Babel compilation to get CSS module class names.

// .babelrc
{
  "plugins": [
    ["babel-plugin-webpack-loaders", {
      "config": "./webpack.config.js",
      "verbose": false
    }]
  ]
}

// webpack.config.js (example)
module.exports = {
  output: { target: 'node' },
  module: {
    loaders: [
      {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader?modules']
      }
    ]
  }
};

// Run babel with the plugin, e.g., babel-node example.js
// example.js
import css from './example.css';
console.log('CSS modules:', css);
// Output: { main: 'example__main--hash' }