如何让 webpack 将其输出发送到两个位置？答案

【问题标题】：How can I get webpack to emit its output to two locations?如何让 webpack 将其输出发送到两个位置？
【发布时间】：2020-06-12 18:22:07
【问题描述】：

我目前的配置如下：

output: {
  filename: 'bundle.js',
  path: OUT_DIR
},

但是我需要 bundles.js 去两个目录？

我可以通过简单地将目录数组传递给路径来完成此操作吗？

或者我需要做一些更复杂的事情吗？

目前我有一个 bash 脚本 cpll，我必须在每次构建后手动输入它，这很乏味。

希望 webpack 有一个配置选项，可以将输出发送到两个或更多位置。

研究

google search

这个 SO 问题已有 4 年历史，没有我要找的东西 - so

文档没有在这里提到一种方法 - webpack。

如果没有配置选项，如何让它自动运行 bash 命令？

我尝试将字符串数组而不是字符串传递给它，但它因明显的错误而崩溃：

配置对象无效。 Webpack 已使用与 API 架构不匹配的配置对象。 - configuration.output.path 应该是一个字符串。

传递数组将不起作用。嗯。

尝试从谷歌开始的另一种方法 - search

提出一个可能的解决方案 - so

每个请求 - 完成 exportFunc

const exportFunc = ( env ) => {
  console.log('webpack.config.js-exportFunc', OUT_DIR);
  return {
    entry: `${IN_DIR}/index.jsx`,
    output: {
      filename: 'bundle.js',
      path: '/Users/c/_top/ll-front/dist'
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [ 'style-loader', 'css-loader' ]
        },
        {
          test: /\.jsx?/,
          include: IN_DIR,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@babel/preset-react'],
              plugins: ['@babel/plugin-proposal-object-rest-spread', '@babel/plugin-proposal-class-properties'],
            }
          }
        }
      ]
    }
  };
};

module.exports = exportFunc;

【问题讨论】：

标签： javascript webpack configuration

【解决方案1】：

您可以通过导出一组配置来使用webpack's multi-compiler mode。

如文档中所述：

您可以导出多个配置，而不是导出单个配置对象/函数（从 webpack 3.1.0 开始支持多个函数）。运行 webpack 时，所有配置都已构建。

例如：

const config = {
  // your webpack config
}

const outputPaths = ["path/one", "path/two"]

module.exports = outputPaths.map(outputPath => {
  return {
    ...config,
    name: outputPath,
    output: {
      ...config.output,
      path: path.resolve(__dirname, outputPath)
    }
  }
})

当您使用函数配置时，您可以执行以下操作：

const outputPaths = ["path/one", "path/two"]

module.exports = outputPaths.map(outputPath => {
  return env => {
    return {
      entry: `${IN_DIR}/index.jsx`,
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, outputPath)
      },
      module: {
        rules: [
          {
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
          },
          {
            test: /\.jsx?/,
            include: IN_DIR,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env', '@babel/preset-react'],
                plugins: ['@babel/plugin-proposal-object-rest-spread', '@babel/plugin-proposal-class-properties'],
              }
            }
          }
        ]
      }
    };
  }
})

【讨论】：

看来我需要用这种方法重构我的整个配置文件？
@j.a.为什么？在某些时候，您有一个对象是您的 webpack 配置。不要直接导出它，而是按照上面的方法导出一组配置，这些配置使用你现有的 webpack 配置作为“基础”配置。分享你的 webpack 配置，我会告诉你。
在 + 上分享了我的 exportFunc。

【解决方案2】：

您可以改用多种配置。这是webpack documentation link.

为避免代码重复，请将您当前的配置视为一个对象。然后复制该对象并覆盖复制对象的输出部分。最后将两个对象放入一个数组中。使用该数组作为您的新配置。

var yourCurrentConfig = {...};

var secondaryDestinationConfig = Object.assign(yourCurrentConfig, {
    output: {
        path: {
            filename: 'bundle.js',
            path: SECONDARY_DIR
        } 
    }
});

var newConfig = [
   yourCurrentConfig, secondaryDestinationConfig
];

【讨论】：