inspectpack

4.7.1 verified Sat Apr 25 auth: no javascript

Inspectpack is an inspection tool for Webpack frontend JavaScript bundles, providing detailed analysis of module sizes, duplicates, and optimization opportunities. Current stable version is 4.7.1 (released 2024). It is maintained by Formidable Labs and can be used both as a Webpack plugin (DuplicatesPlugin) and as an offline CLI tool. Key differentiators: it is the engine behind webpack-dashboard, offers actionable reports for trimming wasted bytes, and supports both plugin and CLI usage with commands like duplicates, versions, and sizes. It has TypeScript types shipped and requires Node >=6.

Common errors

error Error: Cannot find module 'inspectpack/plugin' ↓

cause Incorrect import path or missing install.

fix

Install inspectpack: npm install --save-dev inspectpack, and use require('inspectpack/plugin')

error Invalid configuration object. Plugins have been initialized using an outdated plugin constructor pattern. ↓

cause Using inspectpack plugin with webpack <4.

fix

Upgrade webpack to 4+ or use inspectpack@3.

error TypeError: Cannot read property 'modules' of undefined ↓

cause Bundle file not found or not a proper webpack bundle.

fix

Ensure the bundle path is correct and the file is a valid webpack output.

error The 'emitHandler' option is deprecated; use 'emitErrors' or custom handlers. ↓

cause Using the deprecated emitHandler option.

fix

Remove emitHandler and set emitErrors: true or implement custom logic.

Warnings

breaking Version 4.x dropped support for Node <6. Ensure your Node version is 6+. ↓

fix Upgrade Node to v6 or higher.

deprecated The 'emitHandler' option in DuplicatesPlugin is deprecated. Use 'emitErrors' or custom report handling. ↓

fix Replace 'emitHandler' with 'emitErrors: true' or implement custom handling.

gotcha Plugin only works with webpack 4+; for older webpack, use inspectpack 3.x. ↓

fix Use inspectpack@3 if you are on webpack 3 or older.

gotcha The CLI expects a single bundle file; it does not handle multiple entry points automatically. ↓

fix Run inspectpack separately for each bundle or use the plugin.

Install

npm install inspectpack

yarn add inspectpack

pnpm add inspectpack

Imports

DuplicatesPlugin
wrong
```
const DuplicatesPlugin = require('inspectpack');
```
correct
```
const { DuplicatesPlugin } = require('inspectpack/plugin');
```
DuplicatesPlugin is exported from the subpath 'inspectpack/plugin', not the main export.
inspectpack (CLI)
```
npx inspectpack --action duplicates --bundle path/to/bundle.js
```
The CLI is invoked via npx or global install; --action is required.

TypeScript types

wrong

import DuplicatesPlugin from 'inspectpack/plugin';

correct

import { DuplicatesPlugin } from 'inspectpack/plugin';

DuplicatesPlugin is a named export, not default.

Quickstart

Shows how to add DuplicatesPlugin to webpack config and run CLI duplicates action.

// webpack.config.js
const { DuplicatesPlugin } = require('inspectpack/plugin');

module.exports = {
  plugins: [
    new DuplicatesPlugin({
      emitErrors: false,
      verbose: false,
      ignoredPackages: []
    })
  ]
};

// CLI usage (after installing):
// npx inspectpack --action duplicates --bundle dist/bundle.js