Webpack Hook Plugin

1.0.7 verified Sat Apr 25 auth: no javascript

A webpack plugin that runs shell commands at various stages of the webpack build lifecycle: on build start, on build end, on build exit, and on every compile. Version 1.0.7 is the current stable release, with no active development observed since 2023. It supports both webpack and webpack-dev-server, and allows multiple commands per hook. Unlike similar plugins (e.g., webpack-shell-plugin), this one provides a built-in 'dev' switch to avoid repeated execution in watch mode and a 'safe' mode using exec instead of spawn for compatibility.

Common errors

error TypeError: WebpackHookPlugin is not a constructor ↓

cause Importing as named export instead of default.

fix

Use import WebpackHookPlugin from 'webpack-hook-plugin' or const WebpackHookPlugin = require('webpack-hook-plugin').

error Error: spawn ENOENT ↓

cause The `safe` option is false (default), using spawn which may not find the shell on some systems.

fix

Set safe: true in the options to use exec instead.

Warnings

gotcha The `dev` option defaults to true, which causes scripts to execute only once in development mode (webpack-dev-server or watch). If you expect scripts to run on every rebuild, set `dev: false`. ↓

fix Set `dev: false` in the options object.

gotcha On Windows, the `safe` option may be necessary because `spawn` might not work correctly with shell commands. Setting `safe: true` switches to `exec` which runs in a shell. ↓

fix Set `safe: true` in the options object.

gotcha The `onBuildExit` hook also fires when webpack --watch finishes updating the bundle, not only when the webpack process exits. This may cause unexpected behavior if you expect it to run only once. ↓

fix Use `onBuildEnd` instead if you want scripts to run on every rebuild.

Install

npm install webpack-hook-plugin

yarn add webpack-hook-plugin

pnpm add webpack-hook-plugin

Imports

default
wrong
```
const WebpackHookPlugin = require('webpack-hook-plugin').default
```
correct
```
import WebpackHookPlugin from 'webpack-hook-plugin'
```
Has TypeScript types. Default import works with both ESM and CJS. In CJS, use `const WebpackHookPlugin = require('webpack-hook-plugin')` without .default.

WebpackHookPlugin

wrong

import { WebpackHookPlugin } from 'webpack-hook-plugin'

correct

const WebpackHookPlugin = require('webpack-hook-plugin')

Named import is not available; the package exports a single default export.

type imports
```
import type WebpackHookPlugin from 'webpack-hook-plugin'
```
TypeScript users can import the type for type annotations.

Quickstart

Shows full usage with all hooks and options in a webpack config.

const WebpackHookPlugin = require('webpack-hook-plugin');

module.exports = {
  plugins: [
    new WebpackHookPlugin({
      onBuildStart: ['echo "Webpack Start"'],
      onBuildEnd: ['echo "Webpack End"'],
      onBuildExit: ['echo "Webpack Exit"'],
      onCompile: ['echo "Compile step"'],
      dev: false,
      safe: false
    })
  ]
};