Webpack 2 - compile scss to css and miniffy, together with sourcemaps

Question

I'm completely new to webpack (been using gulp since... forever).

However, I've just decided to use webpack. Decided to go with webpack 2 (2.1.0-beta.20 currently). Been looking all over, still couldn't do a simple task as "give webpack my bootstrap.scss file (which imports all other bootstrap partial scss files needed) and have returned bootstrap.custom.min.css and bootstrap.custom.min.css.map".

I have my own bootstrap.scss file which only imports what I need from bootstrap (not using all of it), but after a custom custom-variables.scss file imported at the top, to overwrite some default bootstrap variables - like colors, grid columns etc. Anyway, I'm sure this is not relevant... The issue is compiling scss to css with custom output file name and sourcemap.

Not that it would make any difference, but to start with, here's my custom bootstrap.scss:

@import "custom-variables"; // to overwrite default bootstrap variables
/**
 * Twitter Bootstrap
 * This is actually copy/paste from the original bootstrap file, just changed paths
 */
// Core variables and mixins
@import "../../../../node_modules/bootstrap/scss/variables";
@import "../../../../node_modules/bootstrap/scss/mixins";
// and so on... only what I need. I don't need tables, forms and a few other.

In addition to this, I also have my own style.scss for which I need to do the same (to have returned style.min.css and style.min.css.map).

As for my webpack.config.js file, this is all I have:

const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');

const sassLoaders = [
    'css-loader',
    'postcss-loader',
    'sass-loader?indentedSyntax=sass&includePaths[]=' + path.resolve(__dirname, './dev')
];

const config = {
    entry: {
        'bootstrap.custom.min': ['./wp-bootstrap'], // this file only contains 1 line: require('./dev/css/overwrite/bootstrap/bootstrap.scss');
        'style.min': ['./wp-style'], // this file also contains 1 line: require('./dev/css/style.scss');
    },
    module: {
        loaders: [
            {
                test: /\.scss$/,
                loader: 'file',
                // or, other examples I've found said to use:
                // loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loaders: 'css!sass' }),
                // but if I try like that, I get: "Cannot read property 'query' of undefined"
                query: {
                   name: '[name].css'
                }
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('[name].css')
    ],
    postcss: [
        autoprefixer({
            browsers: ['last 2 versions']
        })
    ],
    resolve: {
        modules: [
            path.resolve('./'),
            'node_modules'
        ]
    }
};

module.exports = config;

These are all the related packages I have installed:

"devDependencies": {
    "autoprefixer": "^6.4.0",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^2.0.0-beta.3",
    "node-sass": "^3.8.0",
    "postcss-loader": "^0.9.1",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "webpack": "^2.1.0-beta.20"
  }

If I use a version of extract-text-webpack-plugin which is <2.x, then I get other errors, it's not compatible with webpack 2.

So, baby steps in the code above... Simply tried to at least obtain my bootstrap.scss and style.scss transformed into 2 separate css files: bootstrap.custom.min.css and style.min.css (don't know what to do about sourcemaps yet).

This is all I could come up with after searching google and trying to follow some examples. No solid tutorial out there that could make me understand how to use webpack for what I need to accomplish. I'm only guessing here, blind-folded.

But when I type webpack in the console and hit Enter, I don't get any css file, instead I get the following 3 files:

1. bootstrap.css - with the exact same content as the source bootstrap.scss, like it just copies the file content over, instead of compiling scss to css;
2. bootstrap.custom.min.js which has a bunch of javascript code in it;
3. style.min.js - which also has a bunch of javascript code in it.

I've been stuck here for days, didn't even get to all the rest I need (sourcemaps and a destination folder of my choosing for the css files and css.map files).