[Solved]-CSS Code Splitting with Webpack 2 and React Router-Reactjs

yes, this can be done. you'll need commonschunkplugin in addition to extracttextplugin. also, define multiple entry points

entry: {
    a: "./a",
    b: "./b",
    c: "./c",
},

and configure extracttextplugin to use entry point names as css file names

new extracttextplugin({
    filename: "[name].css"
}),

see a full example here:

https://github.com/webpack/webpack/tree/master/examples/multiple-entry-points-commons-chunk-css-bundle

while i may not answer your question how to split css files so that only the necessary ones are loaded the way you want the question to be answered (no plugin or that sort of thing), i hope to give you a possible alternative.

styled-components use the new es6 feature tagged template literal to style the components inside the javascript file. i think using this library would solve your problem of loading only the necessary css files, because there would be no more css files per se.

react-boilerplate chose styled-components over sass, because

styled-components have a more powerful approach: instead of trying to give a styling language programmatic abilities, it pulls logic and configuration out into js these features belong.

so using styled-components would not only solve your problem of loading only the necessary css, but it would further add to the decoupling of your application, makes it easier to test the design and reason about your app.

here's the live demo where you can experiment with the styled-components and check how it works.