webpack-dev-server live reload issue fix

[crawler]

In combination with #2890 fixes #2832.
Since webpack 5, the default compiler target is browserslist (when available), and it is not being recognized by the webpack-dev-server as a target for client injection by default. Because it searches through:

[ 'web', 'webworker', 'electron-renderer', 'node-webkit', undefined, null ]

So, even this can be a webpack-dev-server issue, we need to set this setting explicitly to have Live Reload or HMR working.

[crawler]

@gauravtiwari

For the webpack-dev-server 3 the automatic client injection is made here:
https://github.com/webpack/webpack-dev-server/blob/7e70eeea457a6a154709bd6069c05855f12f7842/lib/utils/addEntries.js#L130

This works well with webpack 4 as the config.target is 'web' and the webTarget var becomes true.
In the webpack-dev-server 4, this code is moved to a different place, but the behavior is exactly the same:
https://github.com/webpack/webpack-dev-server/blob/master/lib/utils/DevServerPlugin.js#L142

As far as I can see, this "target" check was introduced to solve problems building "isomorphic" applications, when the server and the client-side build is going in the same env.
webpack/webpack-dev-server#1775

So if I understand this correctly, this is completely not related to the apps with the ruby backend. And the injectClient setting can be forced without any side-effects.

[pedrofurtado]

@gauravtiwari Happy to this reviewed and merged asap 🎉

[pedrofurtado]

@crawler This PR targets compatibility with webpack-dev-server v3, v4 or both? 🤝

[crawler]

@pedrofurtado Both

[pedrofurtado]

@crawler Strange 🤔 When i set in Gemfile and package.json the webpacker to get from https://github.com/crawler/webpacker -> branch fix-live-reloading, and I execute bundle exec bin/webpack-dev-server, the port is always set as 8080, instead of 3035 as defined in webpacker.yml.

Maybe because the fork is not sync with master yet ... I guess 🤝

[crawler]

Plase try the master branch

[pedrofurtado]

@crawler Now works like a charm! 🎉 🎉 @gauravtiwari I can confirm this PR works (automatic f5 refresh based on file changes) well with latest stable version of webpack-dev-server and this gem itself.

Thanks for your contribution @crawler 🤝 !

[crawler]

@pedrofurtado thank you for checking this out 🤝

[gauravtiwari]

thanks, both 🙏

[justin808]

@gauravtiwari @pedrofurtado this does not work for HMR of CSS modules. More details in #2338.