Comparing Rollup and Webpack for Component Library Bundling and CSS Handling

Rollup is a bundler similar to Webpack and is widely used for packaging component libraries.

We compare Rollup and Webpack by creating two simple modules ( src/index.js and src/utils.js) and building them with both tools.

Rollup setup :

mkdir rollup-test
cd rollup-test
npm init -y
npm install --save-dev rollup

Rollup configuration ( rollup.config.mjs) specifies three output formats (ESM, CJS, UMD):

/** @type {import("rollup").RollupOptions} */
export default {
    input: 'src/index.js',
    output: [
        { file: 'dist/esm.js', format: 'esm' },
        { file: 'dist/cjs.js', format: 'cjs' },
        { file: 'dist/umd.js', name: 'Guang', format: 'umd' }
    ]
};

Running npx rollup -c rollup.config.mjs produces clean outputs without any runtime code.

Webpack setup :

npm install --save-dev webpack-cli webpack

Webpack configuration ( webpack.config.mjs) uses entry, output, and sets libraryTarget to commonjs2 for the CJS build:

import path from 'node:path';
/** @type {import("webpack").Configuration} */
export default {
    entry: './src/index.js',
    mode: 'development',
    devtool: false,
    output: {
        path: path.resolve(import.meta.dirname, 'dist2'),
        filename: 'bundle.js',
        libraryTarget: 'commonjs2'
    }
};

Webpack’s CJS and UMD bundles contain about 100 lines of code because of the built‑in runtime, while its ES module output is still experimental.

CSS handling :

With Rollup we add rollup-plugin-postcss to extract CSS:

import postcss from 'rollup-plugin-postcss';
export default {
    input: 'src/index.js',
    output: [/* same as before */],
    plugins: [postcss({ extract: true, extract: 'index.css' })]
};

Running the build creates a separate index.css file and removes CSS imports from the JavaScript bundle thanks to tree‑shaking.

For Webpack we use css-loader and style-loader (or mini-css-extract-plugin) to achieve similar extraction:

module: {
    rules: [{
        test: /\.css$/i,
        use: ["style-loader", "css-loader"]
    }]
},
plugins: [new MiniCssExtractPlugin({ filename: 'index.css' })]

Both approaches demonstrate that Rollup’s transform hook functions like a Webpack loader, allowing custom CSS extraction plugins.

Relation to Vite :

Vite uses Rollup’s plugin system for both development (transforming modules on the dev server) and production builds, supplementing it with esbuild for fast dependency pre‑bundling. The upcoming Rust‑based rolldown aims to replace the Rollup + esbuild combo.

In summary, Rollup produces minimal, runtime‑free bundles ideal for JavaScript libraries and component libraries, while Webpack excels at complex browser applications; Vite leverages Rollup’s plugin architecture for a modern development experience.