Webpack-dev-server: Common chunk much larger when served with webpack-dev-server

[jouni-kantola]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
When the example below is built with [email protected], without serving with webpack-dev-server the common chunk vendor is 1.59 kb. When served with [email protected] the same bundle is 245 kb. This is pretty confusing as it triggers performance budget warnings.

If the current behavior is a bug, please provide the steps to reproduce.
Example: https://github.com/jouni-kantola/webpack-output-by-build-type/tree/webpack2-dev-server
Pull the repo. Run following to see difference in file sizes:

1. npm run build (vendor: 1.59 kb)
2. npm run serve (vendor: 245 kb)

What is the expected behavior?
It would be more intuitive if built files, with or without serving with webpack-dev-server, results in the same bundles.

Please mention your webpack and Operating System version.

• [email protected]
• [email protected]
• node v6.8.0
• OS: MacOS Sierra (10.12.1)

[SpaceK33z]

Unfortunately that isn't really possible since the client needs to make a websocket connection to the server. We're using a library for that, SockJS, because websockets aren't supported natively in some older browsers. Also, depending on the network, SockJS can switch to XHR polling.

Note that in the next webpack RC the performance feature will be disabled by default. The plan is to only enable it for production mode.

[jouni-kantola]

@SpaceK33z: I don't understand why the outputted file content needs to be different when served with webpack-dev-server?

When I build the same project with [email protected] and [email protected], this is the resulting vendor bundle:
Build:
vendor.ab3c1652eb7b852b49a5.dev.js 1.55 kB 6, 5 [emitted] vendor
Serve:
vendor.ab3c1652eb7b852b49a5.dev.js 1.55 kB 6, 5 [emitted] vendor
Content stays the same.

When I do the same with [email protected] and [email protected] this is the result:
Build:
vendor.ab3c1652eb7b852b49a5.dev.js 1.59 kB 5, 7 [emitted] vendor
Serve:
vendor.2449fd38b685a68f5b2c.dev.js 245 kB 5, 7 [emitted] vendor
Content's changed.

[jouni-kantola]

Link to version where [email protected] and [email protected] is used:
https://github.com/jouni-kantola/webpack-output-by-build-type/tree/webpack1-dev-server

[SpaceK33z]

In v2 inline mode is enabled by default. If you don't want that, use --no-inline or set inline to false.

[jouni-kantola]

Thank you. That fixed the issue. I didn't even know that option existed.

Is there anyway of controlling where the emitted code for inline should be outputted? I've extracted the webpack manifest and inlined that into the page. This seems like a good place to include what's required for webpack-dev-server as well.

[SpaceK33z]

You can also include a <script> manually to include the client script webpack-dev-server needs. See this example.