webpackmonitor / webpackmonitor

A tool for monitoring webpack optimization metrics through the development process

Please note that Webpack Monitor is NOT currently maintained - sorry 😢

Webpack Monitor

Webpack Monitor is a configurable Webpack plugin that captures relevant statistics on your production builds, and an interactive analysis tool that helps developers better understand bundle composition and identify and prioritize optimization strategies.

Usage

Install the webpack monitor plugin on your production config. The plugin will collect stats whenever meaningful changes to bundle composition have occurred. Optionally launch analysis too to see how your bundles have changed over time!

Setup

npm install --save-dev webpack-monitor

in webpack.config.js

const WebpackMonitor = require('webpack-monitor');

// ...

plugins: [
  new WebpackMonitor({
    capture: true, // -> default 'true'
    target: '../monitor/myStatsStore.json', // default -> '../monitor/stats.json'
    launch: true, // -> default 'false'
    port: 3030, // default -> 8081
    excludeSourceMaps: true // default 'true'
  }),
],

• capture will collect stats on the build where meaningful changes have occurred. We do not capture build data where the build does not differ from most recent build on file.
• target specify where to save your build data
• launch will fire up a local server and launch the webpack monitor analysis tool
• port optionally set the port for local server
• excludeSourceMaps excludes emitted source maps from the build stats

Contributing

To contribute to webpack-monitor, fork the repository and clone it to your machine then install dependencies with npm install. If you're interested in joining the Webpack Monitor team as a contributor, feel free to message one of us directly!

Authors

• Jon Roach (https://github.com/roachjc)
• Gordon Yu (https://github.com/gordonu)
• Balal Zuhair (https://github.com/bzuhair)

License

This project is licensed under the MIT License - see the LICENSE.md file for details

webpackmonitor's Issues

No Stats shown in browser.

I installed the webpack monitor plugin and on running the npm run build, it does run on port 8081. However, on the browser I can only see the buttons on the dashboard and the loading wheel with no data displayed about the bundle.

node Version : v6.11.2
webpack version: 4.1.1
I followed the steps mentioned in README except that I defined =>

const WebpackMonitor = require('webpack-monitor');

// ...

plugins: [
new WebpackMonitor({
capture: true, // -> default 'true'
target: '../monitor/myStatsStore.json', // default -> '../monitor/stats.json'
launch: true, // -> default 'false'
port: 3030, // default -> 8081
}),
],

in webpack.common.js

Suggestion: How to configure Webpack Monitor with Mix + Laravel

I am not very strong when it comes to bolting build tools together and I am probably not the only one :)

Would it be possible to include a basic how-to? Maybe something that would watch the default Laravel example here.

Thanks!

Purifycss choking on inline assets

We have assets urls in CSS converted into data url by url-loader and svg-url-loader. Purifycss is choking on these data urls with message:

Unhandled rejection Error: undefined:2933:467: missing '}'

This seems to be the same thing as purifycss/purifycss#144

Does webpack monitor even need to use purifycss? If the user is not using purifycss in their own setup, why use it when generating stats?

Bug: not defensive vs empty stats.json

I have yet to understand why I ended up with an empty stats.json but on subsequent builds, JSON.parse "correctly" crashed (an empty file is not a valid JSON file).

May you either test for an empty string or catch the exception? (SyntaxError: Unexpected end of JSON input)
(I don't know your preferred style - if I knew, I'd PR.)

This plugin doesn't seem to work when multiple configurations are exported

Here's what I mean for multiple exported configurations: https://webpack.js.org/configuration/configuration-types/#exporting-multiple-configurations

/home/.../node_modules/webpack/bin/webpack.js:345
                        throw e;
                        ^

TypeError: arguments[i].apply is not a function
    at Compiler.apply (/home/.../node_modules/tapable/lib/Tapable.js:375:16)

Tapable.plugin is deprecated

DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead
at MonitorStats.apply (...\node_modules\webpack-monitor\monitor.js:32:14)

Would be nice if it could be updated to use the new Webpack 4 API, so we could stop this warning form appearing - when using Webpack 4.

CLI Proposal

Webpack Monitor CLI Proposal

This issue is a request for comments for implementing a CLI for Webpack Monitor.

Motivation

Webpack Monitor is a radical tool, and it would be totally rad if you could
launch the client, capture current stats, publish a static version, etc. without
having to proxy through the webpack build process.

Proposal

Add executable file to allow running webpack monitor commands from terminal.

Proposed command names are: wpm and the emoji 🖥 (OBVI 🎉)

Proposed command args:

• serve - Serve wpm client locally (default port 8081)
• capture - Capture a snapshot of current stats with --json
• publish - Output the static assets for wpm to a directory

ie: wpm start would start a local server with the wpm client with current stats.

Features (related tickets)

This is a large feature that could support many smaller features existing in the
current issues including:

• #91, #78, #70 Ability to run a the client and reload on change to emitted stats file
  by setting capture: true and launch: false in webpack configs and running
  🖥 serve as a separate process.
• #90 Ability to parse and capture stats using a CLI, either by reading an
  existing webpack stats ouput file, or by running wepback through the CLI
  with --json
• #63, #43 Ability to publish monitor as a set of static assets to a directory, which
  could then be deployed as a site using a CDN or S3 bucket, etc.

Architecture

First proposal for feature architecture is to setup directory and the serve feature:

1. Create /plugin/npm-module/scripts directory that contains files for running
   excutable and commands support.
2. Create cli.js in scripts directory as primary cli executable that handles
   parsing args and calling appropriate support files.
3. Move logic for starting local server running wpm client to serve.js file
   inside /scripts directory. Update existing launch feature to use this
   module for launching a local server automatically.
4. Use serve.js to start local server anytime executable is called with serve
   argument.

Additional features can be implemented after.

Webpack Monitor doesn´t know create routes

Hi

I am trying to configure webpack-monitor to have a outpul tile target: '../reports/monitor/monitor-stats.json'

When i execute the build, i get this error. ENOENT: no such file or directory, mkdir 'C:\git\ReactWebpackBoilerplate\reporter\monitor'

Actually i am using Webpack 4 with webpack-monitor: 1.0.14.

Is this working correctly?

[ QUESTION ] Why default browser will open in a blank page?

If launch is set to true, the browser should launch with a selected url + port, not in blank.
Is there a way to collect data without launch browser? (ie. {launch: false, collect:true})

Deploying the dashboard?

I'm assuming lauch: true launches the dashboard under webpack-dev-server. This is nice, but the real value lies in analyzing deployed bundles. Is there any support for bundling and deploying the dashboard or would I have to fork the repo?

Modules circle on overview page too small

Version : 1.0.14

First, thank you for this tool, it is really useful.

The issue I am having is that the circle in the overview page is too small, around a quarter of its normal size.
It wouldn't be such a problem if is it wasn't for the text overlapping the inner most circles-dependencies.

For the record, I am using webpack through Karma, but I don't think it is relevent for this issue.

use js or css cdn url with google not working in china

Error happened

environments

node: v8.3.0
global webpack:  v1.15.0
dev webpack: 2.7.0

my config

const WebpackMonitorConfig = new WebpackMonitor({
    capture: true,
    launch: true,
    port: 3030
})

error in terminal

yarn run v0.27.5
$ node server.js
The server is listening on 8088
/Users/pavoooo/Documents/Pavoooo/job/report-form/node_modules/webpack-monitor/utils/parser.js:21
      modules: chunk.modules.map(module => ({
                            ^

TypeError: Cannot read property 'map' of undefined
    at chunks.stats.chunks.map.chunk (/Users/pavoooo/Documents/Pavoooo/job/report-form/node_modules/webpack-monitor/utils/parser.js:21:29)
    at Array.map (<anonymous>)
    at module.exports (/Users/pavoooo/Documents/Pavoooo/job/report-form/node_modules/webpack-monitor/utils/parser.js:18:26)
    at Compiler.compiler.plugin (/Users/pavoooo/Documents/Pavoooo/job/report-form/node_modules/webpack-monitor/monitor.js:87:24)
    at Compiler.applyPlugins (/Users/pavoooo/Documents/Pavoooo/job/report-form/node_modules/tapable/lib/Tapable.js:61:14)
    at Watching._done (/Users/pavoooo/Documents/Pavoooo/job/report-form/node_modules/webpack/lib/Compiler.js:98:16)
    at /Users/pavoooo/Documents/Pavoooo/job/report-form/node_modules/webpack/lib/Compiler.js:73:18
    at Compiler.emitRecords (/Users/pavoooo/Documents/Pavoooo/job/report-form/node_modules/webpack/lib/Compiler.js:367:37)
    at /Users/pavoooo/Documents/Pavoooo/job/report-form/node_modules/webpack/lib/Compiler.js:56:19
    at /Users/pavoooo/Documents/Pavoooo/job/report-form/node_modules/webpack/lib/Compiler.js:360:11
    at next (/Users/pavoooo/Documents/Pavoooo/job/report-form/node_modules/tapable/lib/Tapable.js:218:11)
    at Compiler.compiler.plugin (/Users/pavoooo/Documents/Pavoooo/job/report-form/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
    at Compiler.applyPluginsAsyncSeries1 (/Users/pavoooo/Documents/Pavoooo/job/report-form/node_modules/tapable/lib/Tapable.js:222:13)
    at Compiler.afterEmit (/Users/pavoooo/Documents/Pavoooo/job/report-form/node_modules/webpack/lib/Compiler.js:357:8)
    at Compiler.<anonymous> (/Users/pavoooo/Documents/Pavoooo/job/report-form/node_modules/webpack/lib/Compiler.js:352:14)
    at /Users/pavoooo/Documents/Pavoooo/job/report-form/node_modules/async/dist/async.js:421:16
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Generate static site

Firstly, I just want to say what a fantastic tool this is.

I'm wondering whether it's possible to generate a static site from the results, rather than the server-based solution? If it's not currently possible, is it on your roadmap anywhere?

Make a difference between "launch" and "serve".

Hi,

Firstly, thanks for this interesting tool !

It could be really great if in the config, we could be able to make a difference between "launch" and "serve". For the moment, both are the same, merged under "launch". But for example, when I restart webpack, i don't want to reopen automatically webpakc monitor page on a new tab. I already have one.

Of course, it needs to decide which one is most important. If launch is true, does it mean that serve is obviously true OR if serve is false does it mean that we don't care about the value of launch because it should be obviously false ?

Suggestion: describe each build and surface in build history so I can see why builds changed

It would be nice to know which build is which, or what changed in a build. For this I'm thinking of a free form text field attached to each build, in addition to the build number.

This text field could be populated via one or more of the following:

• As each build is generated, type the text into the monitor app and have it save into monitor/stats.json
• Extract a description of changes from a webpack config property
• Awesomist of all - have the monitor tool infer changes in some basic cases and generate the text, for example if a loader was added for a build, the text could say "added babel-loader" or if the options changed it could say "babel-loader cacheDirectory=true"

The idea is to keep this brief and then show this on the build history graphs as a data point label. Like we have now:

Though, I would like to show the values maybe along the x-axis (maybe with a toggle control) so I can easily reason about a whole series of builds.

And then use this where it makes sense throughout the monitor tool. For example, the build selector menu could have "22 - babel-loader added"

Plugin is asking to make file sizes larger

Hey team,

Using the following configuration:

new WebpackMonitor({
  capture: true,
  launch: true
}),

I receive the following output:

I am running the monitor on a production build of my app. I am curious if I am doing something wrong, or if there's a bug that seems to have cropped up recently.

Unhandled rejection SyntaxError: unknown: static is a reserved word in strict mode

I got issue when I tried check-up your plugin.

So, I added this code in webpack.common.js

const WebpackMonitor = require('webpack-monitor');

// ...

plugins: [
  new WebpackMonitor({
    capture: true, // -> default 'true'
    target: '../monitor/myStatsStore.json', // default -> '../monitor/stats.json'
    launch: true, // -> default 'false'
    port: 3030, // default -> 8081
  }),
], 

then I run command npm start, I got error

Unhandled rejection SyntaxError: unknown: static is a reserved word in strict mode (109308:16)
  109306 |         function renderColorMask(input, buffer, caretPos) {
  109307 |             function handleStatic() {
> 109308 |                 static || null !== test.fn && void 0 !== testPos.input ? static && null !== test.fn && void 0 !== testPos.input && (static = !1,
         |                 ^
  109309 |                 maskTemplate += "</span>") : (static = !0, maskTemplate += "<span class='im-static''>");
  109310 |             }
  109311 |             if (void 0 !== colorMask) {

node v8.9.1
"webpack": "^3.8.1",
"webpack-dev-middleware": "^1.12.0",
"webpack-dev-server": "^2.9.4",
"webpack-md5-hash": "^0.0.5",
"webpack-merge": "^4.1.1",
"webpack-monitor": "^1.0.13"

Static html instead of started app

Would be nice if instead of a started application the report would be visible in a generated HTML

Add option to ignore source maps

Hello, love the plugin.

Currently my build data includes the emitted source map assets, it would be nice to have an option to ignore these.

I tried setting this in my webpack config to exclude the source maps:

stats = {
    excludeAssets: assetName => assetName.includes('.map')
  }

The source maps are excluded from the console log info from the build, but are still in the webpack monitor data.

What are your thoughts on using the configured stats when creating the webpack monitor stats data? If there's interest I'd love to contribute a PR adding the feature.

Data will not be captured when `launch` is set to false.

Here is my use case:

I would like to capture all data every time I run my building process, but not with a browser launching. And I set a flag to change launch to true, the browser will launch with all of my builds' data.

But I found that only launch: true will capture data. Is it reasonable or I miss something?

...
new WebpackMonitor({
    capture: true, 
    target: '../monitor/myStatsStore.json', 
    launch: false, 
    port: 3030
})
...

WebpackMonitor seems dead

I use react-boilerplate for most of my projects I tried to integrate this wonderful plugin in it but is seems not working; nothing is happening and on the port I chose there is no sign of life.

This is the config I use:

    new WebpackMonitor({
      capture: true,
      target: '../monitor/stats.json',
      launch: true, 
      port: 3001, 
    }),

Suggestion: toggle unchanged files and/or data points on the /builds tab

Many visual git tools will hide "unchanged" files by default. For example, SmartGit has file icons to toggle this:

How about a similar toggle to hide unchanged files and/or data on the /builds tab? That way I can see a granular summary of just what changed. And then I can click to expand everything if desired.

Another option, might integrate nicely with #83 - show two columns to compare the previous build and the current build in a diff like tabular format and emphasize what's changed (i.e. with highlights, strikeouts or something else).

Loading any url except root

Loading any path except root on the webpackmonitor server returns a 404.
This also breaks the back button.

Start Webpack Monitor after Build Process

Hi, thx for this great tool.

How i can use this plugin after a Build-Process?
I need to manually start the tool after the build process is finished.

thx :)

Date has not been captured when i flow the step with README.md

Support for hot reloading

I know this probably isn't the recommended/expected usecase, but I wanted to try this tool so I threw it in the dev webpack build. Unfortunately it breaks whenever webpack tries to hot-reload the project:

Webpack-Monitor is running on port 8082!                                                                                                                                                       
Press ctrl C to exit                                                                                                                                                                           
webpack: Compiling...                                                                                                                                                                          
Writing new build                                                                     
Hash: 9f0cec5a7ea780fc5f36                                                                                                        
Version: webpack 3.8.1                                                                                                                                                                      
Time: 2038ms
                               Asset       Size  Chunks                    Chunk Names
4cd6e0031a7e8177e6f7.hot-update.json   44 bytes          [emitted]
                             main.js     523 kB       1  [emitted]  [big]  main
                         manifest.js    31.1 kB       2  [emitted]         manifest
1.3d2ba17ba7be3958d65b.hot-update.js    4.54 kB       1  [emitted]         main
3d2ba17ba7be3958d65b.hot-update.json   43 bytes          [emitted]
                          index.html  313 bytes          [emitted]
 + 1 hidden asset
[./node_modules/webpack/hot ^\.\/log$] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
    + 397 hidden modules
Child html-webpack-plugin for "index.html":
                                   Asset      Size  Chunks             Chunk Names
    4cd6e0031a7e8177e6f7.hot-update.json  44 bytes          [emitted]
     + 1 hidden asset
       4 modules
webpack: Compiled successfully.
events.js:182
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE :::8082
    at Object._errnoException (util.js:1021:11)
    at _exceptionWithHostPort (util.js:1043:20)
    at Server.setupListenHandle [as _listen2] (net.js:1344:14)
    at listenInCluster (net.js:1385:12)
    at Server.listen (net.js:1469:7)
    at Function.listen (/home/jae/code/editor.beat-react/node_modules/express/lib/application.js:618:24)
    at module.exports (/home/jae/code/editor.beat-react/node_modules/webpack-monitor/utils/server.js:24:7)
    at fs.writeFile (/home/jae/code/editor.beat-react/node_modules/webpack-monitor/monitor.js:124:34)
    at /home/jae/code/editor.beat-react/node_modules/graceful-fs/graceful-fs.js:43:10
    at FSReqWrap.oncomplete (fs.js:136:15)
npm ERR! code ELIFECYCLE
npm ERR! errno 1

I use webpack-monitor as the following as my last plugin:

                new WebpackMonitorPlugin({
                        capture: true, // -> default 'true'
                        //target: './monitor/stats.json', // default -> '../monitor/stats.json'
                        launch: true, // -> default 'false'
                        port: 8082, // default -> 8081
                })

I'm guessing it has something to do with webpack trying to launch another instance of the webpack-monitor server each time it hot-reloads, because setting launch to false works fine.

Thanks alot for such a great tool! I'll probably use this for test/prod builds regardless :).

No Modules & Dependencie Shown

Hello

my "Modules & Dependencie" shows nothing (as you can see in the image). There are no errors in the Chrome console. My actual configuration is the following:

new WebpackMonitor({ capture: true, launch: true })

Am i missing something?

UnhandledPromiseRejectionWarning: Error: undefined:412:2: selector missing

Hello,

I'm getting this error when using WebpackMonitor.

I'm using node 8.11.3 and webpack 4.x.x

npm run build

[email protected] build C:\Users\911161\reactjs\boilerplate
webpack --mode production --config webpack/production.js

(node:22280) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead
DEPRECATION WARNING on line 3, column 10 of stdin:
Including .css files with @import is non-standard behaviour which will be removed in future versions of LibSass.
Use a custom importer to maintain this behaviour. Check your implementations documentation on how to create a custom importer.

(node:22280) UnhandledPromiseRejectionWarning: Error: undefined:412:2: selector missing
at error (C:\Users\911161\reactjs\boilerplate\node_modules\css\lib\parse\index.js:62:15)
at rule (C:\Users\911161\reactjs\boilerplate\node_modules\css\lib\parse\index.js:555:22)
at rules (C:\Users\911161\reactjs\boilerplate\node_modules\css\lib\parse\index.js:118:70)
at stylesheet (C:\Users\911161\reactjs\boilerplate\node_modules\css\lib\parse\index.js:81:21)
at module.exports (C:\Users\911161\reactjs\boilerplate\node_modules\css\lib\parse\index.js:565:20)
at rework (C:\Users\911161\reactjs\boilerplate\node_modules\rework\index.js:27:21)
at CssTreeWalker.beginReading (C:\Users\911161\reactjs\boilerplate\node_modules\purify-css\lib\purifycss.js:568:24)
at purify (C:\Users\911161\reactjs\boilerplate\node_modules\purify-css\lib\purifycss.js:1009:10)
at compiler.plugin (C:\Users\911161\reactjs\boilerplate\node_modules\webpack-monitor\monitor.js:74:24)
at _err1 (eval at create (C:\Users\911161\reactjs\boilerplate\node_modules\tapable\lib\HookCodeFactory.js:24:12), :17:1)
at compiler.plugin (C:\Users\911161\reactjs\boilerplate\node_modules\webpack-monitor\monitor.js:49:7)
at _err0 (eval at create (C:\Users\911161\reactjs\boilerplate\node_modules\tapable\lib\HookCodeFactory.js:24:12), :12:1)
at Promise.resolve.then.then.then.then.then.then.then.then.catch.then.then.then (C:\Users\911161\reactjs\boilerplate\node_modules\html-webpack-plugin\index.js:224:11)
at
at process._tickCallback (internal/process/next_tick.js:188:7)
(node:22280) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:22280) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

webpackmonitor CLI

Webpackmonitor strikes me as a valuable and good-looking tool.

For users of @angular/cli without an ejected webpack.conf, the use of webpackmonitor is something they still have to long for. The good thing though, is that @angular/cli can be configured to have webpack produce a stats.json.

Would it be thinkable that you further spread this great tool and work on a standard-configurable CLI version of webpackmonitor that would basically pick up the stats-json and do its magic with it just as it does as a webpack-plugin?

View by bundle

Hello

My project have multiple entry files for webpack and one bundle by entry.
So It can be smart to visualize this diagram by bundle.

Suggestion: Emphasize changed data points on /builds tab

http://webpackmonitor.com/demo.html#builds

How about emphasize the data points that changed between builds on the /builds tab? This can visually call out differences to the human eye.

• Maybe red for things that are "worse" and green for things that are "better"?
  • And also bold the text to draw attention.
• Or, maybe a diff with the old value crossed out and the new value displayed next to it.
• Or, just bold the text on any differences and make sure the text doesn't clash with titles or other similarly colored/styled text.

throw error on port 8081 when editing code

当我编译项目的时候, 没问题; 但是修改代码实时编译就报错了, 如下:
all is good, bug when I change my code, something wrong happened:

events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE :::8081
    at Object.exports._errnoException (util.js:1022:11)
    at exports._exceptionWithHostPort (util.js:1045:20)
    at Server._listen2 (net.js:1259:14)
    at listen (net.js:1295:10)
    at Server.listen (net.js:1391:5)
    at EventEmitter.listen (E:\workspace\_project\VueCliLearn\node_modules\[email protected]@express\lib\application.js:618:24)
    at module.exports (E:\workspace\_project\VueCliLearn\node_modules\[email protected]@webpack-monitor\utils\server.js:24:7)
    at fs.writeFile (E:\workspace\_project\VueCliLearn\node_modules\[email protected]@webpack-monitor\monitor.js:124:34)
    at E:\workspace\_project\VueCliLearn\node_modules\[email protected]@graceful-fs\graceful-fs.js:43:10
    at FSReqWrap.oncomplete (fs.js:123:15)

wating for u~~~, good plugin

Fails when using multiple entry points and html-webpack-plugin

I love this plugin! I was working on something similar when I stumbled across it when researching webpack performance tips. It's exactly what I need, except it's breaking down a bit on some of my projects.

The output monitor/stats.json is invalid JSON when webpack config has multiple entry points and multiple html-webpack-plugin configurations.

Abbreviated webpack config:

{
    "stats": { "all": true },
    "entry": { 
        "index": "./src/index.ts", 
        "introduction": "./src/introduction.ts" 
    },
    "output": {
        "filename": "[name].js",
        "path": "/dist"
    },
    "plugins": [
        new HtmlWebpackPlugin({...}), 
        new HtmlWebpackPlugin({...}), 
        new WebpackMonitor({
            capture: true,
            launch: true,
        })
    ]
}

Throws error:
SyntaxError: Unexpected token { in JSON at position 11860
at JSON.parse ()
at MonitorStats.apply (/node_modules/webpack-monitor/monitor.js:90:19)

Two blocks of stats are generated and written to the same stats.json:

  {
    "timeStamp": 1546382960936,
    "time": 681,
    "hash": "57c5490ec58f180b3289",
    "errors": [],
    "size": 7574,
    "assets": [
      {
        "name": "index.html",
        "chunks": [],
        "size": 197
      }...
]  {   /* <<<<<----------- breakdown here */
    "timeStamp": 1546384890703,
    "time": 1010,
    "hash": "16e0f2209281944a260c",
    "errors": [],
    "size": 15750,
    "assets": [
      {
        "name": "introduction.html",
        "chunks": [],
        "size": 273
      }...
]

Maybe wrap the multiple stat blocks in an array and assign the array to a prop so that the viewer could handle the file?

Suggestion: add ← → as keyboard shortcuts to move between builds

It would be nice to quickly switch builds with arrow keys or a similarly simple shortcut key. Maybe A/D (of WASD) instead or in addition?

error when used with next.js

error when used with next.js

Error: listen EADDRINUSE: address already in use :::8081
    at Server.setupListenHandle [as _listen2] (net.js:1309:16)
    at listenInCluster (net.js:1357:12)
    at Server.listen (net.js:1445:7)
    at Function.listen (/Users/toan/Desktop/frontend/story-react/node_modules/express/lib/application.js:618:24)
    at module.exports (/Users/toan/Desktop/frontend/story-react/node_modules/webpack-monitor/utils/server.js:24:7)
    at /Users/toan/Desktop/frontend/story-react/node_modules/webpack-monitor/monitor.js:127:34
    at /Users/toan/Desktop/frontend/story-react/node_modules/graceful-fs/graceful-fs.js:61:14
    at FSReqCallback.oncomplete (fs.js:154:23)
Emitted 'error' event on Server instance at:
    at emitErrorNT (net.js:1336:8)
    at processTicksAndRejections (internal/process/task_queues.js:84:21) {
  code: 'EADDRINUSE',
  errno: 'EADDRINUSE',
  syscall: 'listen',
  address: '::',
  port: 8081
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Doesn't work with --watch

This happens as soon as I change a file and the rebuild finishes. By the way it looks like, a new instance of express is launched at that moment.

Was webpack monitor designed to be used with --watch? If it wasn't, consider this as a feature request.

Handle colors package issue

Builds are crashing due to an issue caused in colors package

https://www.bleepingcomputer.com/news/security/dev-corrupts-npm-libs-colors-and-faker-breaking-thousands-of-apps/

Marak/colors.js@074a0f8

EADDRINUSE on compile

Hi!
I'm having an issue using webpack 3.x, everytime my project recompile, I have this error, looks like webpack try to open a new instance of Monitor on the same port. Any idea? I'm using as told on instructions.

Future of Webpack Monitor

I was first excited when I saw this plugin bcz my expectations were

• easy integration into our deployment (via jenkins)
• hooks to e.g. trigger an email if there's a peak in the bundle size
• easy to use in watch mode to monitor the impact of the current changes

But then I found out nothing of this is (at the moment) possible and even worse, I noticed this in the README

Please note that Webpack Monitor is NOT currently maintained - sorry

Are there any plans to continue this project or is it really gone?