statianzo / webpack-livereload-plugin Goto Github PK

View Code? Open in Web Editor NEW

204.0 11.0 52.0 647 KB

LiveReload during webpack --watch

License: ISC License

JavaScript 100.00%

webpack livereload webpack-livereload-plugin hacktoberfest

webpack-livereload-plugin's Introduction

webpack-livereload-plugin

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.

webpack-livereload-plugin's People

Contributors

Stargazers

Watchers

webpack-livereload-plugin's Issues

Hot Module Replacement

This is exactly what I was looking for and was super-easy to setup/configure but my end-goal is to be able to do hot module replacement with a react app. Is that possible with this plugin?

Add more watch paths

Can be added watch paths?
Like to watch files that are not webpack compiled?

Any ideas on this would be useful

Webpack 4 support

This plugin breaks in Webpack 4.

(node:31933) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:31933) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
Live Reload listening on port 35729

/Users/thomas/Desktop/websites/chilli-start-2/node_modules/tapable/lib/Tapable.js:63
		throw new Error(`Plugin could not be registered at '${name}'. Hook was not found.\n` +
		^

Error: Plugin could not be registered at 'html-webpack-plugin-before-html-generation'. Hook was not found.
BREAKING CHANGE: There need to exist a hook at 'this.hooks'. To create a compatiblity layer for this hook, hook into 'this._pluginCompat'.

Add option to watch for changes on other files in the project

Hi there! I am using this plugin in a classic server-side rendered environment based on php. Having the browser reload when I edit my js and scss files is great, but the gold standard for me is to also have the browser reload if I change my php files.

I was able to hack something together that makes this possible through webpack-livereload-plugin. Following are the relevant partsin my webpack.config.js:

const LiveReloadPlugin = require('webpack-livereload-plugin')
const chokidar = require('chokidar');

/**
 * Live Reloading
 */
const initLiveReloadPlugin =() => {
  const options = {
    appendScriptTag: true,
  }
  const liveReloadPlugin = new LiveReloadPlugin(options)
  const reload = path => {
    // this goes through to tiny-lr that is being used by LiveReloadPlugin
    liveReloadPlugin.server.notifyClients(['index.php'])
  }
  // watch for changes to .php files and reload
  createFileWatcher('**/**.php')
    .on('change', reload)
    .on('unlink', reload)
    
  return liveReloadPlugin
}
/**
 * Get a file watcher 
 */
const createFileWatcher = files => {
  const watcher = chokidar.watch(files, {
    ignored: ['node_modules', 'vendor'], 
    ignoreInitial: true,
    followSymlinks: false,
    atomic: false
  })
  return watcher;
}

let config = {
  // My webpack config object...
}

/**
 * Adjusts the config depending on the --mode
 * @see https://webpack.js.org/configuration/mode/
 * @param {object} env  set via --env flag
 * @param {object} argv 
 * @returns 
 */
module.exports = (env, argv) => {
  if (argv.mode === 'development') {
    // here I am injecting the plugin if in dev mode
    config.plugins.push(initLiveReloadPlugin())
  }
  return config;
};

So as you can see, I am starting a chokidar watcher and when I change any of my php files, I send a request through webpack-livereload-plugin to tiny-lr to reload the page.

I can imagine many other people like me would enjoy this kind of functionality. Maybe it could become a part of this plugin? As an additional option, for example watchAdditionalFiles or the like?

Set server when using appendScriptTag: true

Is there an option to set the server when using the appendScriptTag: true option? I need to use an IP address instead of localhost. I can work around this by not using the the appendScriptTag option and setting the ip address in my own script tag, but it'd be ideal if I didn't need to do the work around.

Edit: After looking at the code, it looks like you could make this an option by replacing

this.hostname = this.hostname || 'localhost';

With this:

this.hostname = this.options.hostname || 'localhost';

High CPU

I am using this inside Vagrant host Linux, client Mac. It seems like after a while it starts eating more and more CPU especially when I have had my Mac in sleep I need to like restart the box and start watching again or my computer is like unusable.

On my Mac I see it's vagrant VM using most CPU and when I run top inside the VM it says node at the top, and this is the only nodejs job I have running..

Could something be improved perhaps= :)

From top inside Vagrant:

  PID   USER      PR  NI    VIRT    RES    SHR S %CPU %MEM     TIME+ COMMAND                                                                                                                                 
  21537 vagrant   20   0 1075340 282260  30812 S 44.2  3.5  10:26.63 node

Https: This site can’t be reached

I am using anyproxy alongside webpack and your livereload plugin. I'm unable to reach https: https://localhost:35729/livereload.js I can reach http://localhost:35729/livereload.js

Webpack.confg
new LiveReloadPlugin(),

anyproxy.js

        response: Object.assign({}, response, {
          body: bodyString.replace(
            "</body>",
            `<script src="//127.0.0.1:35729/livereload.js"></script>\n${markup}\n</body>`
          )
        })

As expected the page has <script src="//127.0.0.1:35729/livereload.js"></script> in the source.

I have tried forcing https in the options, but really this shouldn't matter I believe?

Thanks for any help you can give as well bud.

Add files to watch

How do I add more files to watch by this plugin? For example HTML files or files not touched by my webpack build?

Upgrade tiny-lr to 2.0.0 which includes latest livereload-js

Hi,

it would be great if you could upgrade tiny-lr to version 2.0.0 which will then also include the latest livereload-js version.

Thanks!

How to watch for changes in external files?

Hello
I installed the plugin which works perfectly when a file is modified in the dependency graph.
Now, is it possible to also watch and reload the page when other files are modified? (for example php files)
Thank you

Compatibility with CleanWebpackPlugin?

Does this plugin trigger a full build? After triggering a change... all my files get deleted except for the chunk with the file change...

for instance... all my files in dist/auth remain but the files in dist/tenant and everywhere get nuked. im assuming the dist/auth files still remain because my HtmlWebpackPlugin is running again... but CopyWebpackPlugin is not? im just confused.

entry: {
    auth:   `src/auth/index.js`
},
output: {
    filename: '[name]/[name]-bundle-[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: "/"
},
plugins:[
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      chunks: ['auth']
    }),
    // copy a bunch of files from src/tenant to dist/tenant
    new CopyWebpackPlugin([ { from:'./src/tenant', to:'tenant' } ]),
    new LiveReloadPlugin({})
]

Multiple bundles on same page breaks reload

I have a page with three bundles. Unfortunately, reloading does not work with new LiveReloadPlugin({port: 0, appendScriptTag: true}).

On startup, everything looks fine:

Webpack starts with three different reloading ports:

$ ../node_modules/.bin/webpack --mode=development --watch
[webpack-cli] Compilation antd-reduced starting...
[webpack-cli] Compilation logdb-web starting...
[webpack-cli] Compilation starting...
<i> [LiveReloadPlugin] Live Reload listening on port 35729
<i> [LiveReloadPlugin] Live Reload listening on port 35730
<i> [LiveReloadPlugin] Live Reload listening on port 35731
[webpack-cli] Compilation finished
[webpack-cli] watching files for updates...
[webpack-cli] Compilation finished
[webpack-cli] watching files for updates...
[webpack-cli] Compilation finished

The HTML page has three reload scripts included:

<script id="webpack-livereload-plugin-script-2b46959be903b68a" async="" src="//localhost:35729/livereload.js"></script>
<script id="webpack-livereload-plugin-script-40d0cd75cb7a994d" async="" src="//localhost:35730/livereload.js"></script>
<script id="webpack-livereload-plugin-script-15a04157ba643cb0" async="" src="//localhost:35731/livereload.js"></script>

And the browser prints the success message even three times into the console:

[Live Reload] enabled
[Live Reload] enabled
[Live Reload] enabled

However, I have noticed in the network monitor that the URLs are incorrectly mapped:

http://localhost:35729/livereload.js -> ws://localhost:35729/livereload
http://localhost:35730/livereload.js -> ws://localhost:35729/livereload
http://localhost:35731/livereload.js -> ws://localhost:35729/livereload

All three HTTP-URLs are mapped to the same WS-URL!

Load livereload.js over https

I'm in a situation where my local dev server needs to be served over https (for a salesforce plugin).

So, my page won't allow me to load <script src="http://localhost:35729/livereload.js"></script> over http, and if I switch that src url to https, the livereload server responds with a ERR_CONNECTION_CLOSED.

I'm not sure if that issue belongs here or not, but I'm curious if you have any ideas for a workaround?

TypeError: compiler.plugin is not a function (Webpack 5 plugin API change)

Webpack 5 has changed the API for the plugin interface ( similar issue webpack/webpack#11672).
Therefore when I try to use this plugin, I get this error
[webpack-cli] TypeError: compiler.plugin is not a function at LiveReloadPlugin.apply (node_modules\webpack-livereload-plugin\index.js:110:12)

too many reloads, is my delay ignored?

I've set a delay already

new LiveReloadPlugin({
            appendScriptTag: true,
            delay: 3000
        })

and

watchOptions: {
        aggregateTimeout: 300,
        ignored: ['node_modules']
    },

Still my browser tries to reload 30 times and cancels the request.

Running app behind proxy returns "tinylr": "welcome" message, not expected dist/index,html file

im trying to live reload an app I have working behind an nginx reverse proxy which routes a public domain/path into a private ip:port used which Im using to configure this module in webpack.config.js file. I've created a template for my index file.

When run webpack --watch and I load the page all i see is:

{
"tinylr": "Welcome",
"version": "1.1.1"
}

I have added the livereload script into the template which is used to create my index.html file but I don't really understand how the plugin knows which file to use for its entry point.

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var LiveReloadPlugin = require('webpack-livereload-plugin');

module.exports = {
    target: 'node',
    mode: 'development',
    devtool: 'inline-source-map',
    entry: {
        index: './src/index.js',
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
        new LiveReloadPlugin({
            hostname: '0.0.0.0',
            port: 3803,
            protocol: 'http'
        }),
        new HtmlWebpackPlugin({
            title: 'Development',
            template: 'src/index.template.html'
        }),
    ],

This is the file I need to load but Im not specifying it anywhere:

index.template.html (outputs to dist/index.html)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Development</title>
  </head>
  <body>
    <script src="http://socket.syntapse.co.uk/chat3/livereload.js"></script>      
    This file is generated by template file /src/index.template.html according to webpack.config.js 
  </body>
</html>

package.json

{
  "name": "webpack watch",
  "version": "0.0.1",
  "description": "super simple webpack watch example",
  "dependencies": {
    "express": "^4.15.2",
    "socket.io": "^1.7.3"
  },
  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch"
  },
  "devDependencies": {
    "webpack-livereload-plugin": "^2.2.0",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.10.1"
  }
}

nginx.conf server block re routes to webpack.config.js values

server {
    listen 80;
    server_name socket.syntapse.co.uk;
    location ^~ /chat3/ {
        proxy_pass http://0.0.0.0:3803/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

any advice or support very much appreciated.

thanks

TS2322: Type 'LiveReloadPlugin' is not assignable to type WebpackPluginInstance'.

Does not run with Array config

When running webpack --watch with a config like the following

module.exports = [
{
name: 'one'
//...
},
{
name: 'two'
//...
}
]

The watch flag isn't passed to the individual compilers, so the plugin's test of compiler.options.watch is insufficient. Maybe hooking into watch-run for starting is the best event to start the server for this scenario.

Also, make sure that multiple live reload servers don't get started if the plugin is included multiple times on the same port.

Multiple instances of livereload

I have a particular use case where I require two separate webpack services watching different sets of files however I cannot use live reloading for both services even when the port number is different.

Both scripts are being injected (through the appendScriptTag option) however due to a check for an existing id (webpack-livereload-plugin-script), the second fails to load.

var id = "webpack-livereload-plugin-script";
if (document.getElementById(id)) { return; }

Could the id be another configuration item, or could a random string be appended to the id per instance?

Tests

Add some basic tests around this and hook into Travis CI.

Configure polling on client in place of wss:// calls?

Im testing a basic chat server attempting to make it reload on save using this plugin. I can load the page and the assets and the chat socket is working ok but livereload is not working and Im getting an error on page load.

live test server here: https://socket.syntapse.co.uk/chat3.

chrome devtools shows the websocket error:

error: WebSocket connection to 'wss://socket.syntapse.co.uk:80/chat3/livereload' failed: Error in connection establishment: net::ERR_SSL_PROTOCOL_ERROR.
My simple chat server using polling a socket which seems to work fine through my reverse proxy which is all i really need for demo purposes. Is there way to use polling for live reload as a workaround?

If not possible can anyone offer any pointers on correct configuration of nginx for this scenario?

thanks

Plugin dependencies...

When a plugin uses loader and loader adds dependencies, webpack starts watching files and rebuilds files, but, livereload does not work...

Plugin: https://github.com/ampedandwired/html-webpack-plugin
Loader I am using: https://github.com/nemanjan00/ejs-compiled-loader/tree/1.x

Cross-site cookie chrome warning

Hello, I've encountered with this deprecation
A cookie associated with a cross-site resource at http://localhost/ was set without the SameSite attribute. ....
in the Chrome browser.

I was wondering how to solve this problem and not sure if the fix should be done via the webpack config, watch config or in the plugin as this is the actual source of livereload isn't.
Honestly, I'm not sure how to set this in neither of mentioned.

I was hoping that this webpack config would work, but didn't.
devServer: { headers: { "Set-Cookie": "SameSite=None; Secure" } }

Live CSS reloading

I'm using extract-text-webpack-plugin to write .css files and webpack-livereload-plugin reloads the entire page when a CSS file changes.

tiny-lr has support for liveCSS to reload the CSS in place.

Any clues on how I can take advantage of that?

livereload.js don't work

My webpack config:
plugins: [ new LiveReloadPlugin({port: 3001}) ]

In html page:
<script src="http://localhost:3001/livereload.js"></script>

I have got the following error on Chrome:
"GET http://localhost:3001/livereload.js net::ERR_CONNECTION_REFUSED"

how do I have to configure webpack.config.js

Hello,
I want to use the livereload-plugin in my webApp. But somehow it doesn't work. My Webapp should run on port 8080,
which I have defined in devServer. Could you please check my file, which looks as follows?

`const CopyPlugin = require('copy-webpack-plugin');
var LiveReloadPlugin = require('webpack-livereload-plugin');

module.exports = {
plugins: [
new LiveReloadPlugin()
],
entry: {
bundle: ['./app/app.js']
},
output: {
path: __dirname + '/public',
filename: 'app.js'
},
module: {
rules: [
{
test: /.bpmn$/,
use: 'raw-loader'
}
]
},
devServer: {
port: 8080,
},
plugins: [
new CopyPlugin({
patterns: [
{ from: 'assets/', to: 'vendor/bpmn-js', context: 'node_modules/bpmn-js/dist/' },
{ from: '/*.{html,css,png}', context: 'app/' },
],
}),
],
mode: 'development',
devtool: 'source-map'
};
`
thanks and kind regards

reloads after focusing on browser

hello I'm using chrome and webstorm,
whenever I save something in code refresh only happens if I click somewhere on the browser
after that when I move back to webstorm and save something, page refresh happens like it should,
I don't have to focus on browser again
but that works only on first save, for the next changes I have repeat to focus on browser

Compability with WatchExternalFilesPlugin?

In my setup I use the WatchExternalFilesPlugin to watch some xml and html files that I need to copy when they are changed.

The livereload works fine when I change a typescript-file but when the "build" is triggered by WatchExternalFilesPlugin there is no reload.

I'm guessing that I might be doing something wrong but does anyone know if this should work or have any pointers as to where I could look?

Just say that there was a PR around this: #66

Cheers!

is it possible to delay live reload?

I am using a custom webserver for webpack, Whenever I modify my source files, my IDE needs 2-3 seconds to build the project
I would like to have an option {delay: 3000 } in live-reload so that my browser can refresh after a given amount of time.

readme has incorrect instructions

var LiveReloadPlugin = require('webpack-live-reload');

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

v1.1.0 doesn't seem to have the `delay` option

Hello,

I just downloaded [email protected], and I was under the impression that this version had the delay option available, but it doesn't seem to be there.

Is this on purpose?

Thanks

Use get-port to find a free port

https://www.npmjs.com/package/get-port

Instead of hard-coding the LiveReload port, you can find a free port in the system. Unfortunately, get-port is async so it's not straight-forward to implement.

Support reverse proxied URLs with "public_host" and "public_port" plugin configuration.

I am running an express server and a separate webpack instance to watch for code changes. I am using a reverse proxy to route public-domain/path URL to host:port addresses for my server and my webpack (livereload) instance. I think the plugin doesn't support reverse proxied public URL's due to missing configuration but I'm very happy to be corrected if i'm not using the plugin correctly.

live server here: https://socket.syntapse.co.uk/chat3. Reload the page and check developer tools for the errors.

Preliminaries: I run "npm run start" and "npm run watch" on my server and the express app serves the page and loads livereload.js as expected.

Issue: Webpack is recompiling code but livereload.js throws an error and live reload fails:

error:

"WebSocket connection to 'ws://socket.syntapse.co.uk:35729/livereload' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED"

problem:

socket.syntapse.co.uk:35729 is not a valid address. my livereload server is running socket.syntapse.co.uk/chat3:80 but i have no way to configure the livereload plugin to know this.

probable causes:

The websocket address format in livereload.js does not support proxy configurations.
The options.port is incorrect and doesn't match my plugin configuration. It looks like the default value is being used.

possible fix

I think 'socket.syntapse.co.uk:35729/livereload' should become 'socket.syntapse.co.uk/chat3/livereload for correct reverse proxying. To support reverse proxy configurations add a public_host and public_port setting to the livereload plugin config. Use these values to construct the URL in the livereload.js file if they exist else resort to currently supported host and port values. If the port is not included omit it entirely to support the domain.com/path to host:port configuration requirements of a reverse proxied server.

this same functionality exists in the webpack-dev-server to cover the same use case.

My configuration

app public URL:

https://socket.syntapse.co.uk/chat3

<script> to load livereload.js in my express served index.html file

<script src="https://socket.syntapse.co.uk/chat3/livereload/livereload.js"></script>

package.json

  "scripts": {
    "start": "PORT=3803 node index.js",
    "watch": "webpack --watch --progress"
  },

webpack.config.js

    plugins: [
        new HtmlWebpackPlugin({
            title: 'Development',
            template: './index.html'
        }),
        new LiveReloadPlugin({
            hostname: '0.0.0.0',
            port: 3804,
            protocol: 'http'
        })
    ]

nginx routes my public URLs to host:port

    location ^~ /chat3/livereload/ {
        proxy_pass http://0.0.0.0:3804/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
    location ^~ /chat3/socket.io/ {
        proxy_pass http://0.0.0.0:3803/socket.io/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }    
    location ^~ /chat3/ {
        proxy_pass http://0.0.0.0:3803/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

note: please ignore the 404 error on call to index.js. This is only included in the htmlplugin output so i can trigger a recompilation on save.

Object prototype may only be an Object or null

Since Node 5.x:
Warning: Object prototype may only be an Object or null: undefined Use --force to continue.

npm ERR! Cannot read property '0' of undefined

Hello github'ers,

When I try to install this plugin by running npm install webpack-livereload-plugin --save-dev, I get this warning and error:

npm WARN [email protected] requires a peer of ajv@>=4.10.0 but none was installed.
npm ERR! Cannot read property '0' of undefined

Do you have any idea why? Here're all packages that I'm using:

"auto-prefixer": "^0.4.2",
"autoprefixer": "^7.1.2",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.4",
"eslint": "^4.3.0",
"eslint-config-google": "^0.9.1",
"eslint-loader": "^1.9.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.29.0",
"modernizr": "^3.5.0",
"modernizr-loader": "^1.0.1",
"node-sass": "^4.5.3",
"postcss-loader": "^2.0.6",
"rimraf": "^2.6.1",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"webpack": "^3.4.0",
"webpack-svgstore-plugin": "^4.0.1"

Thank you in advance

Blows up on non-watch run

Running without --watch gets you a lovely error:

TypeError: Cannot read property 'notifyClients' of undefined

hot-update files created in output dir

Before I look into this, any chance you know how/why the updated modules would get output? My outdir dir look like this after a new watch compilation:

-rw-r--r-- 1 drew users 1596 Sep 25 14:23 0.1f74233156bb2b1f7cb2.hot-update.js
-rw-r--r-- 1 drew users 1831 Sep 25 14:23 0.1f74233156bb2b1f7cb2.hot-update.js.map
-rw-r--r-- 1 drew users   36 Sep 25 14:23 1f74233156bb2b1f7cb2.hot-update.json

I'm just gitignoring these for now, but ideally they should emit to tmp or get cleaned up automatically.

Without any import statement in my frontend.js: