使用webpack时如何避免使用这个硬编码的index.js？

Question

任务：

• CSS ：编译.scss，添加前缀，缩小并连接到 main.css
• JS ：缩小并连接到 main.js

我们正在使用webpack和BEM。

项目结构：

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

index.js 是webpack的入口点，此内容为：

// javascript
require("./a/a.js");
require("./d/d.js");

// scss
require('./a/a.scss');
require('./b/b.scss');
require('./c/c.scss');
require('./d/d.scss');

这种方法非常糟糕，如何避免这种硬编码 index.js 并自动检测块目录中的新.js和.scss文件？

我们可以为.js或.scss定义一些globs（如Gulp.js）吗？

Answer 1

<强> index.js ：

require.context('./blocks', true, /\.js$/);
require.context('./blocks', true, /\.scss$/);