Charlie Martin Charlie Martin - 5 months ago 176
Javascript Question

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

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

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.
}

But you cannot set the path with a function except by creating the entry object beforehand.