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

How to avoid this hardcoded index.js when use webpack?

本文关键字：编码 index js webpack 何避免 使用      更新时间：2023-09-26

任务：

  • CSS：编译.scss，在main.CSS中添加前缀、minify和concat
  • 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并自动检测块dir中的新.js和.scss文件？

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

index.js：

require.context('./blocks', true, /'.js$/);
require.context('./blocks', true, /'.scss$/);
相关文章：