Webpack Prebundle Plugin

1.0.2 verified Fri May 01 auth: no javascript

A Webpack plugin that prebundles vendor and common code using esbuild, reducing the number of modules Webpack needs to process and boosting build speed. Version 1.0.2 is the latest stable release. It uses esbuild for fast bundling and can replace DLLPlugin without the need for pre-building or committing bundles to Git. Supports watch mode via chokidar. Differentiators: simpler than DLLPlugin, no manual DLL build step, and automatically externalizes prebundled modules via Webpack externals.

Common errors

error Module not found: Error: Can't resolve 'chokidar' ↓

cause Peer dependency chokidar is not installed.

fix

Run 'npm install chokidar' or 'yarn add chokidar'.

error TypeError: webpackPrebundlePlugin is not a constructor ↓

cause Using ES import syntax instead of require, or attempting to instantiate a non-existent named export.

fix

Use 'const webpackPrebundlePlugin = require('webpack-prebundle-plugin');' then 'new webpackPrebundlePlugin(...)'.

error Error: Cannot find module 'esbuild' ↓

cause Peer dependency esbuild is not installed.

fix

Run 'npm install esbuild' or 'yarn add esbuild'.

error PrebundlePlugin: vendors output must be an absolute path ↓

cause The output path provided is relative, not absolute.

fix

Use path.resolve to provide an absolute path, e.g., path.resolve(__dirname, 'vendors.js').

Warnings

gotcha Package is CommonJS only. Using ES import syntax (e.g., import webpackPrebundlePlugin from '...') will fail. ↓

fix Use require('webpack-prebundle-plugin') or use a bundler/transpiler to handle CJS interop.

gotcha The plugin uses Webpack externals internally. If you have conflicting externals configuration, prebundling may not work correctly. ↓

fix Avoid manually setting externals for the same modules; let the plugin handle it.

gotcha Watch mode for commons relies on chokidar. If chokidar is not installed or fails, watch will silently not work. ↓

fix Ensure chokidar is installed as a dependency (it's a peer dependency).

deprecated The schema.json is not actively maintained and may be out of sync with actual options. ↓

fix Refer to the README or TypeScript definitions for current options.

Install

npm install webpack-prebundle-plugin

yarn add webpack-prebundle-plugin

pnpm add webpack-prebundle-plugin

Imports

webpackPrebundlePlugin

wrong

import webpackPrebundlePlugin from 'webpack-prebundle-plugin'

correct

const webpackPrebundlePlugin = require('webpack-prebundle-plugin')

Package is CommonJS only; named export is default export.

new webpackPrebundlePlugin({...})

wrong

new webpackPrebundlePlugin.PrebundlePlugin({...})

correct

new webpackPrebundlePlugin({ vendors: { entries: ['react'], output: path.resolve(__dirname, 'vendors.js') } })

Do not attempt to access a sub-property; the require returns the constructor directly.

webpackPrebundlePlugin as default export

wrong

import { PrebundlePlugin } from 'webpack-prebundle-plugin'

correct

import webpackPrebundlePlugin = require('webpack-prebundle-plugin')

There is no named export; using named import will result in undefined.

Quickstart

Configures the plugin to prebundle vendors and common code, reducing Webpack module count and improving build speed.

// webpack.config.js
const webpackPrebundlePlugin = require('webpack-prebundle-plugin');
const path = require('path');

module.exports = {
  plugins: [
    new webpackPrebundlePlugin({
      vendors: {
        entries: ['react', 'react-dom', 'antd'],
        output: path.resolve(__dirname, '../public/vendors.js')
      },
      commons: [
        {
          entry: path.resolve(__dirname, '../src/services/index.ts'),
          output: path.resolve(__dirname, '../src/prebuilt/services/index.js'),
          watch: true
        }
      ]
    })
  ]
};
// Then add <script src="%PUBLIC_URL%/vendors.js"></script> in HTML template