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

Artur Valeyev
Jul 28, 2017 · 2 min read

На проекте решил использовать 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.

Artur Valeyev

Written by

Web-developer from Kazan, Russia

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade