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

Did you tried renaming anotherPage in "someSubDir/anotherPage" (using the ") in your entry object ? — Quentin Roy
– 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
– GLPease, Commented Sep 22, 2017 at 8:35

Quentin Roy · Accepted Answer · 2016-07-15 05:46:59Z

20

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.

edited Jul 15, 2016 at 5:46

answered Oct 12, 2015 at 17:20

Quentin Roy

7,9172 gold badges34 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Juho Vepsäläinen Over a year ago

Yeah, this makes sense. Great solution.

Owen M Over a year ago

This is genius!

Manjunath Satyamurthy Over a year ago

Wow, this is absolute geniousness ! I was getting frustrated about webpack for not letting me define output path as function(ideally to achieve different output paths). This works so perfectly that I am not even sure to call it a hack.

Manjunath Satyamurthy Over a year ago

For people who are wondering whats different in the solution from the question like I did, He is manipulating the entry filename from just the file name to filename with the required path.

Manjunath Satyamurthy Over a year ago

Best part is, entry takes a function so you can even automate this instead of manually entering the paths !!

|

Juho Vepsäläinen · Accepted Answer · 2015-10-10 10:38:56Z

3

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.

answered Oct 10, 2015 at 10:38

Juho Vepsäläinen

27k13 gold badges83 silver badges109 bronze badges

3 Comments

Charlie Martin Over a year ago

The problem with this approach is that I can no longer create a shared bundle among the different entry points using the CommonsChunkPlugin or a shared stylesheet with the ExtractTextPlugin. Are you are aware of some way to accomplish this with multiple configs?

Juho Vepsäläinen Over a year ago

@CharlieMartin You can do [name]/[name].js but obviously that's not what you want. It's likely you'll need to patch webpack yourself to make it work.

Green Over a year ago

@bebraw patch webpack yourself haha

user6552940 · Accepted Answer · 2019-08-21 18:43:41Z

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"),
    },
}

RiZKiT · Accepted Answer · 2020-01-24 16:43:04Z

0

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.

answered Jan 24, 2020 at 16:43

RiZKiT

2,61835 silver badges29 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

7 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related