Registry / web-framework / babel-plugin-webpack-loaders

babel-plugin-webpack-loaders

library0.9.0jsnpmunverified

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.

web-framework devops

npm install babel-plugin-webpack-loaders

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-WEBPA

babel-plugin-webpack-loaders

web-frameworkjavascriptv0.9.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

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.

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' }

Debug

Known issues

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

affects: >=0.9.0

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

affects: >=0.9.0

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

affects: >=0.9.0

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

affects: >=0.9.0

gotchaBABEL_DISABLE_CACHE=1 environment variable often required to avoid stale cached results.

fix

Set BABEL_DISABLE_CACHE=1 in your environment before running Babel.

affects: >=0.9.0

Errors

Common errors & fixes

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

Plugin not installed or not in node_modules.

fix

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

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

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

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

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

Upgrade

Version history

0.9.0latest on npm

Audit

Dependencies

webpackrequiredRuntime peer dependency; plugin uses webpack internally to resolve and apply loaders.

Agent activity

10 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/istarkov/babel-plugin-webpack-loaders ↗

packagehttps://www.npmjs.com/package/babel-plugin-webpack-loaders ↗