解 説

スタイルシートのバンドル化ってどういうこと?一見、複数のCSSファイルを1枚のCSSファイルにしてくれる仕組みのような気がしますが、それは違います。それならSASSを使えばスッキリと済むはずです。
ここで行うのはCSSファイルをJavaScript化してさらにstyle属性でCSSを書き出すものです。

そのためには、css-loader/style-loaderという仕組みを使います。css-loaderはスタイルシートを読み込むためのものです。
また、style-loaderはstyle要素としてHTMLに反映するものです。

*詳細なコードはGitHubにあります。

簡単なスタイルシートをsrcフォルダに追加しておきます。

css-loader/style-loaderの導入

次に、webpack.config.jsにmodule:{}部分を追記します。

あとはindex.jsにimport './style.css'を追加します。
npm startでブラウザが開きCSSが効いていれば成功です。

index.htmlをブラウザの検証でコードを確認するとheadタグ内にstyleタグが生成されてその中にCSSが記述されているのが確認できます。

スタイルシートを別ファイルにしたい

通常はembedタイプのスタイル設定ではなく別ファイルにする場合が多いです。

この場合はExtractTextPluginを使用します。
ExtractTextPluginの導入は次のようにします。

webpack.config.js

ここで再度ビルドします。

distフォルダにstyle.cssが生成されます。
index.htmlファイルにlink要素でstyle.cssとリンクさせて正しく表示されればOKです。