Webpack 4: glob entry with dynamic output filename

Question

I am trying to figure out if it's possible to set dynamic filenames from glob entries for webpack output directories.

For example

entry: {
        'layout': glob.sync('./src/components/layout/**/*.js'),
        'sections': glob.sync('./src/components/sections/**/*.js'),
        'snippets': glob.sync('./src/components/snippets/**/*.js'),
},
output: {
        filename: './assets/bundle.[name].js',
        path: path.resolve(__dirname, 'dist'),
}

will output

• bundle.layout.js
• bundle.sections.js
• bundle.snippets.js

Is it possible to create an output that will return something like this?

• /layout/bundle.[filename].js
• /sections/bundle.[filename].js
• /snippets/bundle.[filename].js

Answer 1

This workaround worked for what I was trying to do. Instead of messing with the output we can do some functions on the entry.

entry: glob.sync('./src/components/**/*.js').reduce((acc, path) => {
    const entry = path.replace(/^.*[\\\/]/, '').replace('.js','');
    acc[entry] = path;
    return acc;
  }, {}),