In webpack, how can I have different output directories for multiple entry points?

Question

I have the following webpack configuration with multiple entry points...

module.exports = {
 entry: {
  somePage: "./scripts/someDir/somePage.js",
  anotherPage: "./scripts/someDir/someSubDir/anotherPage.js"
 },
 output: {
   path: path.resolve(__dirname, 'out'),
   filename: '[name].js'
 },
 ...

Is it possible to set a different output path for each entry?

Instead of getting an output of...

/out/somePage.js /out/anotherPage.js

I want...

/out/someDir/somePage.js /out/someDir/someSubDir/anotherPage.js

The ideal solution for me would be for output.path to accept a function. For example...

...
output: {
   path: function (name, hash) {
       return path.resolve(__dirname, myMapOfFilenamesToDirs[name]);
   },
   filename: '[name].js'
},

Does anyone know if this is possible or if there is an existing plugin that can accomplish this?

EDIT I don't want to use multiple config entries (multi-compiler) because I won't be able to create a shared file among the entry points with CommonsChunkPlugin anymore

Answer 1

A bit hacky, but this should do the trick.

module.exports = {
 entry: {
  "somePage": "./scripts/someDir/somePage.js",
  "someSubDir/anotherPage": "./scripts/someDir/someSubDir/anotherPage.js"
 },
 output: {
   path: path.resolve(__dirname, 'out/someDir'),
   filename: '[name].js'
 },
 // Etc.
}

You cannot set the path to a function, webpack won't call it for you.