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

Question

我遵循 docs 并实现了如下所示的内容：

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

但是，只有一个目标通过，我认为没有确定性的过程来确定构建哪个目标（也就是说，有时构建网络目标，其他时候节点目标）。

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

我使用的webpack版本是4.30.0.

Answer 1

我整理好了。在我的常用配置中，我使用的是 clean-webpack-plugin:

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

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

大多数时候，您并不真的需要这个插件，尤其是当您从 CI.

进行部署时

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

How to build for multiple targets with webpack?

node.js

webpack

webpack-4