webpack-monitor

Webpack Monitor

A webpack plugin to gather build data, render useful analysis of how your bundles transform over time and make suggestions on how you can keep your compiled application optimized.

Use webpack monitor in your production build configuration to keep track of changes to webpack's output throughout the development process. Identify builds where heavyweight libraries are introduced. See how much you could reduce asset file size using common optimization methods. Prioritize optimizations based on what will be most beneficial to your project.

Installation

Install the plugin with npm:

npm install webpack-monitor --save-dev

Basic Usage

const WebpackMonitor = require('webpack-monitor');
const webpackConfig = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  plugins: [
    new WebpackMonitor({
      capture: true,
      launch: true,
    }),
  ],
};

The plugin accepts the following options.

• target: The route for the outputted JSON stats file (relative to build directory). Defaults to ../monitor/stats.json
• launch: If true, start server and launch webpack monitor analysis dashboard. Default false
• capture: Capture stats on current build if different from previous build. Default true.
• port: port at which to serve webpack monitor dashboard on launch. Default 8081