Wie vermeidet man diese hardcoded index.js bei Verwendung von Webpack?

Question

Aufgaben:

• CSS: .scss kompilieren, fügen Sie Präfixe, minify und Concat in main.css
• JS: minify und Concat in main.js

Wir verwenden Webpack und BEM.

Projektstruktur:

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 ist Einstiegspunkt für webpack, dieser Inhalt:

// 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'); 

Dieser Ansatz ist sehr schlecht, wie dies zu vermeiden fest einprogrammierten index.js und erkennt automatisch neue .js und .scss Dateien in Blöcke dir?

Können wir einige Globs (wie in Gulp.js) für .js oder .scss definieren?

Answer 1

index.js:

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