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

【问题标题】：How to avoid this hardcoded index.js when use webpack?使用 webpack 时如何避免这种硬编码的 index.js？
【发布时间】：2016-08-09 06:36:14
【问题描述】：

任务：

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，并自动检测blocks目录下新的.js和.scss文件？

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

【问题讨论】：

标签： javascript css node.js sass webpack

【解决方案1】：

index.js：

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

【讨论】：