Webpack: сборка CSS в отдельную папку

На проекте решил использовать Webpack, и возникла необходимость “сборки” CSS (из SASS) в кастомную папку.
По умолчанию Webpack диктует нам определенные условия в плане расположения выходных файлов, и в “обычном” случае мы получаем JS и CSS файлы рядом друг с другом, к тому же, подразумевается вызов CSS прямо из JS.
Для создания внешних CSS файлов официальная документация советует использовать плагин extract-text-webpack-plugin.
Но в нем есть один существенный минус — нельзя задать свою директорию для сохранения CSS. Можно задать только имя файла.
Долго копался и все-таки нашел способ, как дать webpack’у понять, что мы собираем разные вещи — JS отдельно, а CSS отдельно. Способ несколько костыльный, более того — он не совсем соответствует логике webpack, но он работает!
Итак, сразу покажу готовый файл webpack.config.js:
Как это работает
Параметр module в принципе не содержит в себе ничего необычного — лоадер babel-loaderдля работы с ES6 в JS файлах и лоадеры css-loaderи sass-loaderдля возможности работы с SASS (SCSS).
Ключевое — это параметры entryи output.
Webpack нам в официальной документации указывает, что формат output может быть только один, но имя файла может содержать в себе placeholder’ы, которые динамически будут подставляться при сохранении файла.
А различные конфигурации entry нам позволяет входить через один конкретный файл, либо объединять файлы при входе, либо поочередно входить в каждую указанную точку.
Вот именно третий вариант мы и используем. Как входную точку передаем webpack’у объект вида {имя_точки:путь_входа, имя_точки2:путь_входа2}. При такой подаче конфига webpack поочередно будет входить по указанному пути, и, в дальнейшем, при сохранении файлов на выходе можно использовать имя входной точки с помощью плейхолдера [name].
И вот в этом моменте мы используем легкий финт ушами: в качестве имени точки входа мы передаем путь для сохранения, и таким образом при сохранении файла в плейхолдере [name] мы имеем необходимый путь!
В моем случае это работает так:
Webpack видит объект entry и берет первую пару: имя js/app.js и путь ./app/src/entry.js, входит по указанному пути, работает, и на выходе составляет имя файла по шаблону output, а именно: __dirname + '/build/ + filename, куда вместо filename ставит указанный плейсхолдер [name], то есть составляет такой путь: __dirname + '/build/' + [name], и, подставляя наше имя входной точки, мы получаем такой путь: __dirname + '/build/' + 'js/app.js'.
Аналогично поступает с второй входной точкой по имени css/main.css, то есть выходной путь для нее будет выглядеть так: __dirname + '/build/' + 'css/main.css'
Таким образом мы можем задать абсолютно разные папки выходных файлов для каждой отдельной точки входа, и каждую точку входа использовать, грубо говоря, как задачу, если проводить аналогии с gulp или grunt.
