live-reload-notify-webpack-plugin
A webpack plugin for notifying a LiveReload server of changed webpack output assets.
I created this plugin to be used in the following development scenario:
- Gulp/Grunt starts a tiny-lr server.
- Express configured with webpack-dev-middleware.
- Single-page application (Angular) running on the client.
Since webpack-dev-middleware maintains a copy of webpack outputs in memory, I couldn't figure out a watch to trigger LiveReload when those in-memory assets changed. The popular solution seems to be to run the LiveReload server within the express server (where you can get a hook to the server instance, and notify it of reloads). This solution works - however, I typically use nodemon on the server when doing fullstack development. As a result, each time I restarted the server, I had to incur the overhead of restarting the LiveReload server as well. Additionally, I wanted to find a solution for performing css update injection (without requiring a full page refresh).
Thankfully, tiny-lr provides a RESTful API for requesting a LiveReload. This plugin looks for assets that change with each webpack-dev-middleware rebuild, and notifies the LiveReload server of only the assets that have changed.
Usage
var LiveReloadNotifyPlugin = ;webpackConfigplugins;
Options
var defaultOptions =port: 35729 // the port where LiveReload is runningignoreFirstRun: true // choice of whether to notify LiveReload the first time a webpack build runs,{} // function used to output which files that have changed;