Search code examples
webpackentry-pointmultiple-entries

Is it possible in Webpack to have multiple subdirectory entry points with multiple relative outputs


Is it possible to set an entry point for each child directory then outputs to a relative build folder. The result would be a structure something like:

 blockholder
│
│
├── package.json
├── webpack.config.js
│
│
├── block1
│   ├── index.js
│   └── build
│           └── index.build.js
│
└── block2
    ├── index.js
    └── build
            └── index.build.js

Multiple folders, each with its own entry and build.


Solution

  • Yes. It's possible to set multiple configurations within a single webpack config file.

    If you use an array in your config file, all the configurations within that config will be built.

    Small example:

    module.exports = [
    {
      entry: {
        block1: "./block1/index.js"
      },
      output: {
        filename: "[name].build.js",
        path: path.resolve(__dirname, "block1/build")
      }
    }, 
    {
      entry: {
        block2: "./block2/index.js"
      },
      output: {
        filename: "[name].build.js",
        path: path.resolve(__dirname, "block2/build")
      }
    }]
    

    On the off-chance that your configurations will be the same for every bundle, I think you could also use a single configuration, something like this:

    module.exports =
    {
      entry: {
        block1: "./block1/index.js"
        block2: "./block2/index.js"
      },
      output: {
        filename: "./[name]/build/[name].build.js"
      }
    }