Webpack 2 — компилировать scss в css и miniffy вместе с исходными картами

Я совершенно новичок в веб-пакете (использую gulp с... навсегда).

Однако я только что решил использовать webpack. Решил использовать webpack 2 (сейчас 2.1.0-beta.20). Просмотрел все, но все еще не мог выполнить простую задачу, например, «дать webpack мой файл bootstrap.scss (который импортирует все остальные необходимые частичные файлы scss начальной загрузки) и вернуть bootstrap.custom.min.css и bootstrap.custom.min.css.map».

У меня есть собственный файл bootstrap.scss, который импортирует из бутстрапа только то, что мне нужно (не используя все это), но после того, как пользовательский файл custom-variables.scss импортируется вверху, чтобы перезаписать некоторые переменные бутстрапа по умолчанию, такие как цвета, столбцы сетки и т. д. В любом случае, я Я уверен, что это не имеет значения... Проблема заключается в компиляции scss в css с пользовательским именем выходного файла и исходной картой.

Не то чтобы это имело какое-то значение, но для начала вот мой собственный 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.

Помимо этого у меня есть еще и свои style.scss, для которых нужно сделать то же самое (чтобы вернули style.min.css и style.min.css.map).

Что касается моего файла webpack.config.js, то это все, что у меня есть:

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;

Это все связанные пакеты, которые я установил:

"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"
  }

Если я использую версию extract-text-webpack-plugin ‹2.x, то получаю другие ошибки, она несовместима с webpack 2.

Итак, маленькие шаги в приведенном выше коде... Просто попытался хотя бы преобразовать мои bootstrap.scss и style.scss в 2 отдельных файла css: bootstrap.custom.min.css и style.min.css (еще не знаю, что делать с исходными картами).

Это все, что я смог придумать после поиска в Google и попытки следовать некоторым примерам. Нет надежного руководства, которое могло бы помочь мне понять, как использовать webpack для того, что мне нужно. Я только предполагаю здесь, с завязанными глазами.

Но когда я набираю webpack в консоли и нажимаю Enter, я не получаю никакого файла css, вместо этого я получаю следующие 3 файла:

1. bootstrap.css - с тем же содержимым, что и исходный bootstrap.scss, как будто он просто копирует содержимое файла вместо компиляции scss в css;
2. bootstrap.custom.min.js в котором есть куча кода javascript;
3. style.min.js - в котором также есть куча кода javascript.

Я застрял здесь на несколько дней, даже не добрался до всего остального, что мне нужно (исходные карты и папка назначения по моему выбору для файлов css и файлов css.map).