webpack-watch-livereload-plugin

Use webpack --watch to start LiveReload server.

Straightforward LiveReload can't fully replace Webpack's neat Hot Reload but it's very useful when you just need to reload browser when HTML changes.

This plugin mimics to gulp-livereload or similar and intended to use with any external app server (Django manage.py runserver for example) so your Webpack can watch for files are out of loaders now.

Installation

Install the package:

npm install --save-dev webpack-watch-livereload-plugin

Add the plugin to your webpack config:

// webpack.config.js
var WatchLiveReloadPlugin = require('webpack-watch-livereload-plugin');
 
module.exports = {
    entry: // ...
    output: // ...
 
    // ...
 
    plugins: [
        new WatchLiveReloadPlugin({
            files: [
                // Replace these globs with yours
                './src/**/*.html',
                './src/**/*.css',
                './src/**/*.png',
                './src/**/*.jpg',
                './src/**/*.js',
            ]
        }),
    ]
}

Add a LiveReload script to your page pointed at the LiveReload server or install LiveReload browser extension.

Options

• files — path, array, glob or array of globs to watch
• port — port for the LiveReload server (35729 by default)

Thanks

This plugin was inspired by webpack-livereload-plugin.