CODEWITHSUNDEEP
javascriptwebpackwebpack-4
Mike
Mike

Reputation: 411

Webpack 4: glob entry with dynamic output filename

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

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

Upvotes: 2

Views: 1227

Answers (1)

Mike
Mike

Reputation: 411

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;
  }, {}),

Upvotes: 2

Related Questions