如何使用 webpack 构建多个目标？

Question

我按照文档并实现了如下所示的内容：

...
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];

然而，只有一个目标通过，而且我不认为存在确定性过程来确定构建哪个目标（也就是说，有时构建 Web 目标，有时构建节点目标）。

我不确定我在上面的配置中做错了什么，但我觉得存在一些竞争条件，一个目标先于另一个目标构建，因此节点进程在构建两个目标之前退出。是这样吗？这是我的常用配置。

我使用的 webpack 版本是4.30.0.

Answer 1

我整理了一下。在我的通用配置中，我使用clean-webpack-plugin：

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

显然，在构建第二个目标时，clean 插件正在擦除第一个目标。

大多数时候，您并不真正需要这个插件，特别是如果您从 CI 进行部署。