This is a summary of an exceptional video I watched on youtube related to webpack 2 style loaders.  All concepts here are still relevant in the most recent webpack version (4)

Definitions
CSS-loader – Takes your css files and adds them to your bundle
SASS-loader – takes sass/css files and adds them to your bundle.
Style-loader – Takes a stylesheet that has been added to your bundle and converts it into a style tag. I.e. load your css to style tags.

To use any of these loaders just add them to your rules like this.

rules: {
  test: RegExp, use: [applied, in, reverse],
  test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']
}

But this inlines each of your styles as it’s own individual file into the header. What if you wanted to just include a single file?

Enter the extract-text-webpack-plugin

It wraps all the files and then combines them into a single file. You add this to the plugins area

plugins: [
  new ExtractTextPlugin({
    filename: "new-stylesheet-name.css",
    disabled: isDev,
    allChunks: true
  })
]

and then update the scss rule to use the plugin

rules: {
  test: /\.scss$/,
  use: ExtractTextPlugin({
    fallbackLoader: 'style-loader',
    loader: ['css-loader', 'sass-loader'],
    publicPath: '/dist'
  })
}