Merging config with multiple targets

I’m after using multiple targets to have a server side config and a client side config packaged. Where one targets node and the other uses the default web target.

webpack.base.js

let clientConfig = {
  entry: "./src/website/js/App.tsx"
}

let serverConfig = {
  entry: "./src/server/server.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
  },
  target: "node"
};
}

webpack.config.js

let clientConfig = {
  devtool: "source-map"
};

module.exports = webpackMerge(config, [clientConfig]);

Before the merge the json looks healthy:

[ { entry: './src/website/js/App.tsx' },
  { entry: './src/server/server.js',
    output: { path: 'C:\\Dev\\dist', filename: '[name].js' },
    target: 'node' } ]

But the output from the merge looks like it’s become a single object and hence now fails with the typical errors 'output.filename' is required ...

{ '0':
   { entry: './src/website/js/App.tsx',
     devtool: 'source-map',
     module: { rules: [Object] },
     output: { filename: '[name].js' },
     plugins: [ [Object], [Object] ] },
  '1':
   { entry: './src/server/server.js',
     output: { path: 'C:\\Dev\\dist', filename: '[name].js' },
     target: 'node' } }

[bebraw]

Thanks. I think I see a way that could be a good compromise:

1. Change base.js to export like module.exports = { clientConfig, serverConfig };.
2. dev.js - module.exports = [merge(base.clientConfig, clientConfig), base.serverConfig];
3. prod.js - module.exports = [base.clientConfig, base.serverConfig];

It’s a bit more code than in the ideal solution. The key insight is that base.js doesn’t have to care about composition at all. It’s enough if it exposes the configuration fragments you compose later. In production you can skip merging entirely as earlier. During development you tweak the client configuration. If you needed to tweak the server too, it would be possible there.

I thought about expanding webpack-merge to support what you need but that would lead to a special case to document (also something for users to remember). That said, it could be sensible to write a multi-compiler friendly variant which performs merge based on array position like in your example.

[bebraw]

@ggirard07 Yeah, let’s close. Good call.