javascript - 让目录中的所有文件成为 webpack 入口点的最佳方法？

Question

我想为网站创建多个入口点，这在 Webpack 中使用 entry 属性的对象很容易完成，例如 here .

但是随着站点的增长(并且它不可避免地会)，必须添加每个入口点似乎很麻烦并且容易出错。所以我想简单地指向一个目录并说“这里是所有入口点。”

所以我做了这个:

var path = require('path');
var fs = require('fs');
var entryDir = path.resolve(__dirname, '../source/js');
var entries = fs.readdirSync(entryDir);
var entryMap = {};
entries.forEach(function(entry){
    var stat = fs.statSync(entryDir + '/' + entry);
    if (stat && !stat.isDirectory()) {
        var name = entry.substr(0, entry.length -1);
        entryMap[name] = entryDir + '/' + entry;
    }
});

module.exports = {
  entry: entryMap,
  output: {
    path: path.resolve(__dirname, '../static/js'),
    filename: "[name]"
  },
...

这工作正常，但是 Webpack 中是否有一个功能或配置选项可以为我处理这个问题？

Answer 1

我认为 glob 是去这里的正确方法(AFAIK webpack 不会为你做这个)。这就是我最终得到的结果，它将找到目录中的所有文件并创建一个名称与文件匹配的条目:

var glob = require('glob');
var path = require('path');

module.exports = {
  entry: glob.sync('../source/js/**.js').reduce(function(obj, el){
     obj[path.parse(el).name] = el;
     return obj
  },{}),
  output: {
    path: path.resolve(__dirname, '../static/js'),
    filename: "[name]"
  },
...

调整搜索路径以满足您的特定需求。如果您有一个特殊的脚本目录，将其作为相对路径搜索的新根目录，那么将 {cwd: someRoot} 作为第二个参数传递也可能很有用。