Add shared styles, bundle and remove duplicates config

Recently I wanted to refactor styles in project. Earlier it was imported as on file into index.js. I decided to refactor styles to ‘style per component’.

My ultimate file with styles looks like this:

Here is the way to add loader for styles. I use MiniCssExtractPlugin.loader instead of style-loader. With Webpack 3 (and earlier) we used ExtractTextPlugin for bundling but it's deprecated in Webpack 4, and we need to use MiniCssExtractPlugin. I'm also importing my common file with sass-resouce-loader. It's recommended to pass an array of sass files, but I have pretty many imports, so I joined all in one file.

At the end we need to add plugins for bundling (MiniCssExtractPlugin) and optimizing our styles (OptimizeCssAssetsPlugin).