CODEWITHSUNDEEP
node.jswebpackwebpack-4
Paul Razvan Berg
Paul Razvan Berg

Reputation: 21410

How to build for multiple targets with webpack?

I followed the docs and implemented something that looks like this:

...
const config = {
    mode: 'development',
    devtool: 'inline-source-map',
};

const nodeConfig = merge(common, {
    ...config,
    output: {
        filename: 'bundle.node.js',
    },
    target: 'node',
});

const webConfig = merge(common, {
    ...config,
    node: {
        crypto: true,
    },
    output: {
        filename: 'bundle.web.js',
    },
    target: 'web',
});

module.exports = [nodeConfig, webConfig];

However, only one target gets through and I don't think there's a deterministic process to figure out which one gets built (that is, sometimes the web target is built, other times the node target).

I'm not sure what I'm doing wrong in the configuration above, but I feel that there's some racing condition whereby one target gets built before the other, so the node process exits before building both targets. Is that the case? Here's my common config.

The version of webpack I'm using is 4.30.0.

Upvotes: 5

Views: 3791

Answers (1)

Paul Razvan Berg
Paul Razvan Berg

Reputation: 21410

I sorted it out. In my common config, I was using clean-webpack-plugin:

plugins: [
    new CleanWebpackPlugin(),
    ...
]

Obviously, when building the second target, the clean plugin was erasing the first target.

Most of the times, you don't really need this plugin, especially if you're deploying from CI.

Upvotes: 8

Related Questions