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

Question

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

Тем не менее, я просто решил использовать веб-пакет. Решил перейти с webpack 2 (2.1.0-beta.20 на данный момент). Просматривал все, все еще не мог сделать простую задачу, как "дать веб-пакет мой 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 в консоли и нажмите Enter, я не получаю никакого файла CSS, вместо этого я получаю следующие 3 файла:

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

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