将目录中的所有文件作为webpack中的入口点的最佳方法是什么？

Question

我想为网站创建多个入口点,这很容易在Webpack中使用entry属性的对象完成,就像这里一样.

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

所以我把它煮熟了:

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}如果您有一个特殊的脚本目录，这将使其成为相对路径搜索的新根目录，则将它作为第二个参数传入也可能很有用。