使用DefinePlugin，在webpack中将单个入口点编译为多个输出。

Question

我目前已经设置了webpack使用babel-loader将一个单一入口编译成一个单一输出包。类似于：

entry.js

import { A } from "a.js"
import { B } from "b.js"
...
if (TEST) {
    console.log("this is a test");
}

webpack.config.js

module.exports = {
    entry: {
        entry: "entry.js"
    },
    output: {
        filename: "[name].bundle.js",
        path: __dirname + "/output"
    },
    module: {
        rules: [
        {
            test: /\.js$/
            use: {
                loader: "babel-loader"
            }
        }]
    },
    plugins: [
        new webpack.DefinePlugin({
            TEST: JSON.stringify(true)
        })
    ]
}

目前一切正常。 但是我想要的是能够创建两个版本的entry.bundle.js的能力。一个版本TEST为true，另一个版本为false：entry.bundle.js和entry.test.bundle.js

为了实现这一点，我需要改变什么？理想情况下，我不想有多个webpack配置文件。

- WindowsMaker

---

你想同时构建这两个吗？还是其中一个构建像开发构建和生产构建一样？我们有类似的情况，其中 gulp 任务根据任务名称使用不同的配置运行 webpack。我知道这不完全符合你的要求，但我认为这是非常标准的。 - Cory Danielson

同时 - WindowsMaker

Answer 1

如果您在此文件中有布尔值，为什么不只是if/else文件名并将相同的布尔值传递给插件呢？

let TEST = true; // assume this is passed in somehow, perhaps via cli arguments

module.exports = {
  entry: {
    entry: 'entry.js'
  },
  output: {
    filename: TEST ? '[name].test.bundle.js' : '[name].bundle.js'
    path: __dirname + '/output'
  },
  module: {
    rules: [{
      test: /\.js$/,
      use: {
        loader: 'babel-loader'
      }
    }]
  },
  plugins: [
    new webpack.DefinePlugin({
      TEST: JSON.stringify(TEST) // variable, will be consistent with filename
    })
  ]
}

我理解你想做什么，但是我不知道通过任何webpack特定的技术更好的方法来实现。

- scniro

---

好的，将会有更多的布尔值。我的目标是设置A/B测试，并且不需要编译捆绑包来为每个其他代码编写代码。 - WindowsMaker

这对你不起作用吗？我没有完全理解你的最终期望。您能否更明确地澄清您的问题，以便了解您希望实现的确切内容？ - scniro

@WindowsMaker，这个问题有什么更新吗？在你的赏金到期之前，我想帮你解决它。 - scniro

抱歉，我刚刚将您的答案标记为已接受 :) 我认为它非常接近我所需的，并且帮助我重新思考了我的问题。对于任何遇到这个问题的人来说，这绝对是解决方案 :) 谢谢！ - WindowsMaker

很高兴听到你能够解决这个问题，或者至少走上了正确的道路。编程愉快！ :) - scniro