I looked hard, and couldn't find a straight answer to this question.
Do the packages I add as devDependencies
actually end up in the production bundle JS file and thus affect its size? Or is it only the dependencies
that go into the bundle?
No it will not affect your bundle size because those package are only using in development mode. Let's take an example package like typescript
devDependencies: {
"typescript": "~3.2.5"
}
So I only need to have typescript compier, linting just in dev mode. And I'm not actually import typescript in my project because it's only use for dev mode. So if you are using webpack and you wont import typescript anywhere then in your project webpack will you tree shaking to eliminate code that don't need for production build so the bundle will not affect.
The answer is not that easy as might look. Here is clarification: https://github.com/webpack/webpack/issues/520#issuecomment-174011824
And adding relevant snippet here:
A browser app built by webpack has no runtime node dependencies, and thus all frontend dependencies should be listed as devDependencies. The dependencies vs devDependencies naming convention stems historically from node being a server side package manager, which was abused into a frontend package manager, and this is why the fields have names that are counter-intutive when applied to frontend dev, and is why every project ever is getting this wrong. It is as far as I can tell harmless to list frontend dependencies under dependencies, but it is wrong.
I hope this answers your question.
dependencies
to devDependencies
or vice versa, you still have the same list of dependencies from webpack PoV, and thus, bundle size is unaffected. If you remove dependency from both places, bundle size change depends on particular dependency -- it might or might not contribute to bundle size.