How to build a frontend with webpack and BEM?

Question

css

Task:
CSS : compile .scss, add prefixes, minify and merge into one file main.css
JS : minify and merge into one file main.js
The project structure is as follows:

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

How should I proceed - create one entry point at the root of blocks, for example index.js and manually require for each .js, and then also manually import .scss?
If you go this way, you will have to add each new block to index.js - is this a normal approach?
For example, in Gulp you can write glob (*.scss) - and it will automatically find all files that match this glob. Is there a similar approach in webpack?
How to be? Tell me please!

Answer 1

In webpack, you simply specify the file extension in the config and the loader that should process this file type.
https://github.com/WapGeaR/react-redux-boilerplate... here is an example