• Stars
    star
    203
  • Rank 192,890 (Top 4 %)
  • Language
    JavaScript
  • License
    ISC License
  • Created about 9 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

LiveReload during webpack --watch

webpack-livereload-plugin

CI node

LiveReload when running webpack --watch

Installation

Install the package

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

Add the plugin to your webpack config

// webpack.config.js

var LiveReloadPlugin = require('webpack-livereload-plugin');

module.exports = {
  plugins: [
    new LiveReloadPlugin(options)
  ]
}

Add a script tag to your page pointed at the livereload server

<script src="http://localhost:35729/livereload.js"></script>

Options

  • protocol - (Default: protocol of the page, either http or https) Protocol for livereload <script> src attribute value
  • port - (Default: 35729) The desired port for the livereload server. If you define port 0, an available port will be searched for, starting from 35729.
  • hostname - (Default: hostname of the page, like localhost or 10.0.2.2) The desired hostname for the appended <script> (if present) to point to
  • appendScriptTag - (Default: false) Append livereload <script> automatically to <head>.
  • ignore - (Default: null) RegExp of files to ignore. Null value means ignore nothing. It is also possible to define an array and use multiple anymatch patterns.
  • delay - (Default: 0) amount of milliseconds by which to delay the live reload (in case build takes longer)
  • useSourceHash - (Default: false) create hash for each file source and only notify livereload if hash has changed
  • useSourceSize - (Default: false) check size for each file source and only notify livereload if size has changed (Faster than useSourceHash but it has a downside. If file size hasn't changed no reload is triggered. For example if color has changed from #000000 to #ffffff no reload will be triggered!)

Why?

Yes, there's already webpack-dev-server that handles live reloading and more complex scenarios. This project aims to solve the case where you want assets served by your app server, but still want reloads triggered from webpack's build pipeline.

HTTPS

If you set key, cert, or pfx options, they'll get passed through to tiny-lr as options and it will serve over HTTPS. You'll also also set protocol to https.

FAQ

Webpack always generates js and css together

If your webpack is always generating js and css files together you could set useSourceHash to true to generate a hash for each changed asset and it should prevent multiple reloads.

Alternatively if this slows your build process you could set liveCSS and liveImg to false to prevent multiple reloads.

More Repositories

1

Fleck

C# Websocket Implementation
C#
2,286
star
2

dokku-supervisord

Use supervisord as the runner within dokku
Shell
120
star
3

dokku-shoreman

Run all process types with dokku
Shell
98
star
4

que-web

A web interface for the Que queue
Ruby
88
star
5

mark-loader

Wrap Webpack modules with performance.mark and performance.measure
JavaScript
61
star
6

PostLog

An HttpAppender for log4net
C#
21
star
7

vim-jade

Vim syntax highlighting for the Jade templating engine.
Vim Script
21
star
8

hubot-newrelic2

New Relic stats from Hubot
CoffeeScript
13
star
9

sql-setup

Setting up a Postgresql instance
10
star
10

hampool

NCVEC amateur radio question pools in JSON format
JavaScript
9
star
11

que-testing

Make assertions on enqueued jobs
Ruby
8
star
12

angularjs-testing-library

Simple and complete AngularJS DOM testing utilities that encourage good testing practices.
TypeScript
7
star
13

pmrpc

JSON-RPC over postMessage
TypeScript
6
star
14

chumps

JavaScript
5
star
15

rn-mini

React Native + Snack primer
3
star
16

lua_kata

Lua
3
star
17

ServerSent

JavaScript
3
star
18

ng-templatecache

Convert html to Angular $templateCache entries
JavaScript
3
star
19

love_life

Game of life in Lua Love
Lua
3
star
20

KnockoutList

Todos.js in Knockout
JavaScript
3
star
21

Fleck.WinFormsExample

Example of using Fleck with Winforms
C#
3
star
22

SimpleMVVM

Example application displaying MVVM. Also, implements an AttachedBehavior
2
star
23

ActionContainer

A container agnostic dynamic service agent implementation
C#
2
star
24

dotfiles

My dotfiles
Vim Script
2
star
25

rsturing

Turing machine in rust
Rust
1
star
26

WindsorMefMvc

A combination of Castle Windsor and MEF with ASP MVC
JavaScript
1
star
27

hubot-lunch-rotation

Rotate lunch weekly by individuals
CoffeeScript
1
star
28

lua_euler

Working through Project Euler with Lua for some practice
Lua
1
star
29

minsin

Sinatra+Minitest Skeleton
Ruby
1
star
30

lcthw

Learn C the Hard Way Exercises
C
1
star
31

js-hs

Me just playing with Haskell
Haskell
1
star
32

RubyTutorial

Following along RubyTutorial.org
Ruby
1
star
33

cors-test

Testing redirects of cors
1
star
34

kr

Going through K&R
C
1
star
35

bayesball

A Bayes Classification Implementation
Ruby
1
star
36

SilverlightMultiUpload

A silverlight control allowing multiple files to be uploaded asynchronously.
1
star
37

tree

Ruby
1
star
38

bigo

Rust
1
star
39

chinook-web

JavaScript
1
star
40

statianzo.github.com

Trying out Jekyll
CSS
1
star
41

KnockoutListTested

A tested version of KnockoutList
JavaScript
1
star
42

append-basename-webpack-plugin

Append to basenames before resolution in webpack
JavaScript
1
star
43

JQueryList

Don't try this at home
JavaScript
1
star
44

andy

Views for Android using YAML
Ruby
1
star
45

yellowbrick

Send email -> Post blog
Ruby
1
star
46

MvcToFubu

Testing out MVC3 and Fubu
JavaScript
1
star
47

scoutcoding

Sample projects for scouting merit badge
Ruby
1
star
48

fubu-template-example

For demonstration purposes
C#
1
star
49

MultiThreadFileAccessWebApp

A web app that uses a background thread to create files from database request
JavaScript
1
star