Css are embeded in the production build about webpack HOT 6 CLOSED

This is expected - only CSS in the initial entry chunk is extracted. Any async-loaded chunks CSS is dynamically inserted. This is actually recommended because you don't want to load all the CSS in your async chunks on initial load.

See http://webpack.github.io/docs/stylesheets.html#separate-css-bundle

from webpack.

Consider the same example as vuejs/vue-loader#139 with vue-router and lazy-load to switch between ComponentA and ComponentB.

Each component has its own chunk (0.js = ComponentA & 1.js = ComponentB) and each chunk contains the same CSS.

Each chunk has its own piece of css, but each chunk is bigger. It would be best if the CSS was extracted in a file that is required along with the chunk. This way, if the CSS is already in cache, the new chunk use it.

from webpack.

You can do that if you want to, just remove the vue-style-loader argument on these lines: https://github.com/vuejs-templates/webpack/blob/master/template/build/webpack.prod.conf.js#L27-L30

from webpack.

Still the same with vue-loader-style removed.

Each chunk contains the required CSS. Even if the CSS code is exactly the same.

from webpack.

Oh I guess I misunderstood your last comment. See this section: http://webpack.github.io/docs/stylesheets.html#styles-in-commons-chunk

from webpack.

👍 thank you sir !

from webpack.