CODEWITHSUNDEEP
javascriptwebpack
Charlie Martin
Charlie Martin

Reputation: 8406

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

Upvotes: 12

Views: 7635

Answers (4)

RiZKiT
RiZKiT

Reputation: 2521

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.

Upvotes: 0

user6552940
user6552940

Reputation: 986

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

Upvotes: 0

Quentin Roy
Quentin Roy

Reputation: 7887

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.

Upvotes: 20

Juho Vepsäläinen
Juho Vepsäläinen

Reputation: 26873

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.

Upvotes: 3

Related Questions