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

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

• javascript
• webpack

• Did you tried renaming anotherPage in "someSubDir/anotherPage" (using the ") in your entry object ? – Quentin Roy Commented Oct 12, 2015 at 17:13
• I had tried send the second parameter in path.resolve as 'build/[name]/', turned out Webpack wouldn't compile. But the best answer below really works like charm. – GLPease Commented Sep 22, 2017 at 8:35

4 Answers 4

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.

You can return an array of configurations for webpack to execute. I think that will give you enough control over the output path to achieve what you need.

I had the same issue today, adding on to the answer from @quentin-roy, https://stackoverflow.com/a/33086806/6552940

You can also create the output path mappings for input files using glob and the following callback. Adjust your glob pattern according to your needs. The following pattern and callback if applied on the directory structure

- src
   - file01.ts
   lib
     - file02.ts

will result in

- dist
   - file01.js
   lib
     - file02.js

config = {
    entry: () => {
        const entries = {};
        glob.sync("./src/**/*.ts").forEach(filePath => {
            entries[
                path
                    .relative("./src", filePath)
                    .replace(path.extname(filePath), "")
            ] = filePath;
        });
        console.debug(
            `Entries created:\n${JSON.stringify(entries, undefined, 4)}`,
        );
        return entries;
    },
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname, "dist"),
    },
}

After some evaluations I'm using the Webpack-watched-glob-entries-plugin for some time, because it is small, does what we need and works also in watch mode.

If you need even more ideas take a look here Wildcards in entry points.