fix: include 'browserslist' in webTarget

[chenxsan]

• This is a bugfix
• This is a feature
• This is a code refactor
• This is a test update
• This is a docs update
• This is a metadata update

For Bugs and Features; did you add new tests?

Not yet.

Motivation / Use-Case

Close #2758

It's a naive fix, might need more research.

Breaking Changes

Additional Info

[codecov]

Codecov Report

Merging #2761 (35ae034) into v4 (19b793f) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##               v4    #2761   +/-   ##
=======================================
  Coverage   93.04%   93.04%           
=======================================
  Files          39       39           
  Lines        1308     1308           
  Branches      348      348           
=======================================
  Hits         1217     1217           
  Misses         87       87           
  Partials        4        4           

Impacted Files	Coverage Δ
lib/utils/addEntries.js	100.00% <ø> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 19b793f...35ae034. Read the comment docs.

[alexander-akait]

It is not the best solution, but it is good as a temporary workaround

[chenxsan]

It is not the best solution, but it is good as a temporary workaround

Seems browserslist can target Node.js too, I think I see what you mean now.

[chenxsan]

@evilebottnawi

It seems the sockPath information is no longer written to stdout under webpack 5 causing a CI failure:

yarn run v1.22.4
$ NODE_ENV=development webpack-dev-server
ℹ ｢wds｣: Project is running at http://localhost:3000/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/sam/Downloads/Webpack.HMR.bug.repro
ℹ ｢wds｣: 404s will fallback to /index.html
(node:48147) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
ℹ ｢wdm｣: asset src.js 405 KiB [emitted] (name: src)
asset index.html 248 bytes [emitted]
runtime modules 24 KiB 10 modules
cacheable modules 333 KiB
  modules by path ./node_modules/webpack-dev-server/ 21.2 KiB
    modules by path ./node_modules/webpack-dev-server/client/ 20.9 KiB 10 modules
    modules by path ./node_modules/webpack-dev-server/node_modules/ 296 bytes 2 modules
  modules by path ./node_modules/webpack/hot/*.js 4.3 KiB 4 modules
  modules by path ./node_modules/html-entities/lib/*.js 57.9 KiB 4 modules
  modules by path ./node_modules/querystring/*.js 4.51 KiB
    ./node_modules/querystring/index.js 127 bytes [built] [code generated]
    ./node_modules/querystring/decode.js 2.34 KiB [built] [code generated]
    ./node_modules/querystring/encode.js 2.04 KiB [built] [code generated]
  modules by path ./node_modules/url/*.js 23.1 KiB
    ./node_modules/url/url.js 22.8 KiB [built] [code generated]
    ./node_modules/url/util.js 314 bytes [built] [code generated]
./node_modules/webpack/hot/ sync nonrecursive ^\.\/log$ 170 bytes [built] [code generated]
webpack 5.0.0 compiled successfully in 669 ms
ℹ ｢wdm｣: Compiled successfully.

Here's the webpack 4's log:

yarn run v1.22.4
$ NODE_ENV=development webpack-dev-server
ℹ ｢wds｣: Project is running at http://localhost:3000/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/sam/Downloads/Webpack.HMR.bug.repro
ℹ ｢wds｣: 404s will fallback to /index.html
ℹ ｢wdm｣: Hash: 9d0f6d881c332b47e29b
Version: webpack 4.44.2
Time: 610ms
Built at: 10/12/2020 11:06:52 PM
     Asset       Size  Chunks             Chunk Names
index.html  248 bytes          [emitted]  
    src.js    395 KiB     src  [emitted]  src
Entrypoint src = src.js
[1] multi (webpack)-dev-server/client?http://localhost:3000&sockPath=/mysockPath (webpack)/hot/dev-server.js ./src/index.jsx 52 bytes {src} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:3000&sockPath=/mysockPath] (webpack)-dev-server/client?http://localhost:3000&sockPath=/mysockPath 4.29 KiB {src} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {src} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {src} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {src} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {src} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {src} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {src} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {src} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {src} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.59 KiB {src} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {src} [built]
[./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {src} [built]
[./node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1.34 KiB {src} [built]
[./src/index.jsx] 31 bytes {src} [built]
    + 21 hidden modules
Child HtmlWebpackCompiler:
     1 asset
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 475 bytes {HtmlWebpackPlugin_0} [built]
ℹ ｢wdm｣: Compiled successfully.

Is the log of webpack 5 without that socket information expected? If it is, then we can no longer test the sockPath by the current method.

BTW, we have webpack 4 under devDependencies which means tests are run against webpack 4 locally while on CI they're run against the latest webpack 5.

[chenxsan]

CI on Node 6 and Node 8 failed because webpack 5 supports Node.js 10+.

[alexander-akait]

Yep, can you fix it?

[chenxsan]

@evilebottnawi Are we going to support both webpack 4 and webpack 5 in webpack-dev-server v3? If yes, I guess we need to update the CI to test against both.

[alexander-akait]

I think yep, we need support two, not all developers migrate on webpack@5

[leodr]

According to the webpack docs, browserslist:last 2 versions would also be a valid browser target that this patch would not pick up, or am I wrong?

[chenxsan]

@leodr You are right here, it won't cover those cases as it's a naive fix at the moment.

[alexander-akait]

@chenxsan sorry for delay, can you switch on v4 branch these changes?

[chenxsan]

@evilebottnawi The fix is so naive that I was going to drop this PR. If you still want to accept it, I'll take care of it tomorrow.

[alexander-akait]

@chenxsan I want to merge it, we will improve more target logic in the future, this fix is enough

[alexander-akait]

target can be array, so I think we need improve it too, anyway thanks for the PR

[chenxsan]

Maybe close this one in favor of #2841? Seems like @ylemkimon can fix it soon, hence no need to merge a workaround like this one.