让目录中的所有文件成为 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} 作为同步的第二个参数也可能很有用。

Answer 2

我为此使用了Glob。

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

module.exports = {
  entry: { 'app' : glob.sync('./scripts/**/*.ts*') },
  output: {
    path: path.join(__dirname, '/wwwroot/dist'),
    filename: '[name].bundle.js',
    sourceMapFilename: '[name].map'
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
      }
    ]
  },
  resolve: {
    extensions: [".ts", ".js"]
  }
};

Answer 3

在我看来，只需要一点Node技能，也不必那么复杂。

const webpack = require('webpack');
const path = require('path');
const fs = require('fs');

const fileNames = fs.readdirSync('./src').reduce((acc, v) => ({ ...acc, [v]: `./src/${v}` }), {});

const config = {
  entry: fileNames,
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]',
  },
};

module.exports = config;