javascript - webpack 基于 DefinePlugin 将单个入口点编译成多个输出

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 配置文件

Answer 1

如果你在这个文件中有 bool 值，为什么不只是 if/else 文件名并将相同的 bool 值传递给插件？

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 的技术可以更巧妙地做到这一点。