根據 Webpack 構建上下文更改 webpack DefinePlugin 值

Question

使用 Webpack 的DefinePlugin ，是否可以根據 Webpack 構建上下文更改鍵的值？ 如條目名稱、輸出詳細信息等。

例如：

module.exports = {
  entry: {
    main: "main.js",
    "main-free": "main.js",
  },
  plugins: [
    new webpack.DefinePlugin({
      FREE_VERSION: (ctx) => ctx.entryName.endsWith("-free"),
    }),
  ],
  output: {
    filename: `[name].js`,
  },
};

// main.js

if (FREE_VERSION) {
  alert("You're using a free version.");
} else {
  alert("Thank you for purchasing.");
}

Answer 1

我不認為你可以用 DefinePlugin 做到這一點，但你可以通過導出一組配置來解決它：

function getConfig(entryKey, entryValue, isFree) {
  return {
    entry: {
      [entryKey]: entryValue
    },
    plugins: [
      new webpack.DefinePlugin({
        FREE_VERSION: isFree,
      }),
    ],
    output: {
      filename: `[name].js`,
    },
  }
};

module.exports = [
  getConfig("main", "main.js", false),
  getConfig("main-free", "main.js", true),
];