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

Question

任务:

• CSS:编译 .scss，添加前缀，缩小并连接到 ma​​in.css
• JS:缩小并连接到 ma​​in.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 并自动检测 blocks 目录中的新 .js 和 .scss 文件？

我们可以为 .js 或 .scss 定义一些 glob(如在 Gulp.js 中)吗？

Answer 1

index.js:

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