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

【问题标题】：How to build for multiple targets with webpack?如何使用 webpack 为多个目标构建？
【发布时间】：2019-04-24 09:33:06
【问题描述】：

我遵循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];

但是，只有一个目标通过，我认为没有确定性的过程来确定构建哪个目标（即，有时构建 web 目标，有时构建节点目标)。

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

我使用的 webpack 版本是4.30.0。

【问题讨论】：

标签： node.js webpack webpack-4

【解决方案1】：

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

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

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

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

【讨论】：