feat(karma-webpack): added livereload capabilities

sprilukin commented 3 years ago

This PR contains a:

[ ] bugfix
[x] new feature
[ ] code refactor
[ ] test update
[ ] typo fix
[ ] metadata update

Motivation / Use-Case

Read use case here: #499

Breaking Changes

The only breaking change is: if the user already used devServer webpack config property karma-webpack will be started in livereload mode. This could be improved by adding some other config property that will tell karma-webpack to use the old behavior

Additional Info

Disclaimer: This PR is not final because i'm not an expert neither in karma-webpack nor in webpack/webpack-dev-server

Some decisions should be made for this PR:

how should we enable livereload? now livereload is triggered by the presence of devServer property in a webpack config. This might be considered a breaking change
how should we configure livereload? for example in the current implementation devServer.port property is required. But we might want to create a completely isolated webpack-dev-server instance.

Support for new webpack config property

This PR adds support for webpack devServer config property.

If devServer property is added in the webpack config the following flow is used:

instance of the webpack-dev-server is created. This instance will watch for source/test code changes and reload the browser page.
if devServer property is used, then it is required to contain the port property.

codymikol commented 3 years ago

Hey @sprilukin , thanks for making a PR, its really appreciated.

I'm a bit hesitant to add webpack-dev-server as another dependency to the project. Is there some reason that these reporters cannot work directly with karma-webpack given we add hooks to webpack rebuilds?

sprilukin commented 3 years ago

Hi, @codymikol. karma-webpack hooks can not force the browser page to be reloaded. Instrumentation of the source code should be done to achieve this - client code in the browser should use a socket connection to listen for any changes and reload the page. This is what webpack-dev-server does. At least i did not found any other ways to achieve this behavior.

I managed to create my own plugin based on karma-webpack to achieve the same behavior: https://github.com/sprilukin/karma-webpack-livereload so if you do not think that this could be part of the karma-webpack project, you can simply close this PR.

codymikol commented 3 years ago

Ok, thank you again for your contribution!

codymikol / karma-webpack