webpack-rollup-loader

0.8.1 verified Mon Apr 27 auth: no javascript maintenance

A Webpack loader that delegates module bundling to Rollup while using Webpack's own module resolution. Version 0.8.1 is the latest stable release, with no active development since 2020. It requires both webpack >=3.3.0 and rollup ^1.0.0 || ^2.0.0. Key differentiator: combines Rollup's tree-shaking and ES module optimizations with Webpack's plugin ecosystem and code splitting. Best suited for project entry points where Rollup's bundling is desired but full migration is impractical. Not for general .js files due to recursive bundling issues.

Common errors

error Module build failed: Error: This loader must be used only once per entry module ↓

cause The loader was applied to multiple modules or recursively.

fix

Restrict the loader to the entry module only using test: /entry\.js$/.

error Error: Unexpected token: keyword (const). You may need an appropriate loader to handle this file type. ↓

cause Babel converts ES modules to CommonJS before Rollup processes them, preventing tree-shaking.

fix

Set modules: false in Babel config for files processed by Rollup.

Warnings

breaking Loader must only be applied once to the entry module. Applying it to all .js files will produce incorrect code. ↓

fix Use test: /entry\.js$/ or similar to target only the entry point.

gotcha If using Babel, ensure it does not convert ES6 imports to CommonJS. Otherwise, Rollup will not be able to analyze the module graph. ↓

fix In Babel config, disable @babel/plugin-transform-modules-commonjs or set modules: false.

deprecated Package is in maintenance mode with no releases since 2020. Not compatible with Webpack 5 without additional adjustments. ↓

fix Consider alternative loaders like rollup-loader or migrate fully to Rollup or Webpack 5 native features.

Install

npm install webpack-rollup-loader

yarn add webpack-rollup-loader

pnpm add webpack-rollup-loader

Imports

default import

wrong

import webpackRollupLoader from 'webpack-rollup-loader'

correct

No direct import; configured in Webpack config as a loader

This is a Webpack loader, not a JavaScript module for direct import.

Webpack rule for loader

wrong

module.exports = { module: { rules: [ { test: /\.js$/, use: [{ loader: 'webpack-rollup-loader' }] } ] } }

correct

module.exports = { module: { rules: [ { test: /entry\.js$/, use: [{ loader: 'webpack-rollup-loader' }] } ] } }

Must only be applied to the entry module, not to all .js files.

Quickstart

Configures Webpack to use webpack-rollup-loader on the entry file only, with Rollup options and Babel for other JS files.

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/entry.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /entry\.js$/,
        use: [
          {
            loader: 'webpack-rollup-loader',
            options: {
              external: ['lodash']
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /entry\.js$/,
        use: ['babel-loader']
      }
    ]
  }
};