Best way to have all files in a directory - webpack entry points?

Question

I want to create several entry points for a website, which is pretty easy to do in Webpack using an object for a property entry, like here .

But as the site grows (and it will inevitably be) adding each entry point seems cumbersome and error prone. Therefore, I would just point to the directory and say "these are all entry points."

So, I prepared this:

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]"
  },
...

This works fine, but is there an option or configuration in Webpack that will handle this for me?

Answer 1

, glob - , (- AFAIK ). , , , :

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"]
  }
};

Hide result