Как собрать фронтенд с помощью webpack и БЭМ?

Question

[Артём Иннокентьев]

Задача:
CSS: скомпилировать .scss, добавить префиксы, минифицировать и объединить в один файл main.css
JS: минифицировать и объединить в один файл main.js

Структура проекта такая:

static/
├── build
│   ├── main.css
│   └── main.js
└── src
    └── blocks
        ├── a
        │   ├── a.js
        │   └── a.scss
        ├── b
        │   └── b.scss
        ├── c
        │   └── b.scss
        └── d
            ├── d.js
            └── d.scss

Как надо действовать - создать одну точку входа в корне blocks, к примеру index.js и сделать вручную require для каждого .js, а затем еще и вручную импортировать .scss?

Если пойти таким путем, то придется добавлять каждый новый блок в index.js - это разве нормальный подход?

К примеру, в Gulp можно прописать glob (*.scss) - и он автоматически найдет все файлы удовлетворяющие этому glob. Есть ли аналогичный подход в webpack?

Как быть? Подскажите, пожалуйста!

Answer 1

[Антон Измайлов]

В вебпаке просто указываете в конфиге расширение файла и лоадер который должен этот тип файлов обрабатывать.
https://github.com/WapGeaR/react-redux-boilerplate... вот пример