Is it correct to include styles via webpack?

Question

css

Now I'm studying webpack and something tells me that including styles directly in the module is not a good idea.
What cons do I see:
- when changing styles, you need to rebuild the bundle again. Is it possible to make sure that the styles are still collected in a separate bundle.css?
- because styles are essentially a js module, then these js modules should be loaded synchronously, while css is loaded asynchronously
What can you say about this?

Answer 1

Plugin for saving styles to a separate file: https://github.com/webpack/extract-text-webpack-plugin

Answer 2

module.exports = {
  cache: true,
  debug: true,
  devtool: 'source-map',
  entry: {
    app: ['./src'],
    style: ['./src/style'],
    vendor: ...

Thus, the style bundle is separated from the rest, and when styles change, only it is rebuilt.
In dev mode, I do not use the extract-text-webpack-plugin plugin, but no one bothers to make separate configurations for dev mode and for the build, and add this plugin in the build.

Answer 3

And one more question. Let's say we have a SPA. If our main bundle is very large and takes a few seconds to load, do we need to make two of them? The first one is small and light, which only loads the second bundle and shows the spinner at the same time?