html-webpack-live-reload-plugin

Reloads browser when watching any assets changes, friends with html-webpack-plugin / webpack5

This intentionally works with the last webpack 5, html-webpack-plugin inject html with assets feature

Usage

webpack.config.js

1const HtmlWebpackLiveReload = require('html-webpack-live-reload-plugin');
2
3plugins: [
4    new HtmlWebpackPlugin() // intentionally work together with this
5    new HtmlWebpackLiveReload(),
6  ]

The plugin will start only when "watch" mode

API

new HtmlWebpackLiveReload(options)

• options.port: socket server port, default 3333

Need to Know

HtmlWebpackLiveReload does only watch live reload via standalone socket.io

• It has to another web server to handle http(s)
• The standalone socket.io has different web origin. Most of browser block this working. The worth case, the live reload stopped.
• To overcome this, "Moesif Origin" browser extension is the easiest. I do not want to anything extra in production code. So, developer do one more thing, please

The End

Simple and do the work for me. Thanks.