search

statianzo / webpack-livereload-plugin

LiveReload during webpack --watch
ISC License
204 stars 51 forks source link

Multiple bundles on same page breaks reload #69

Open pmwmedia opened 3 years ago

pmwmedia commented 3 years ago

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

On startup, everything looks fine:

  1. 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

  2. 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>

  3. 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!