如何制作Webpack来产生代码变体？

Question

我有一个项目正在使用Webpack从index.js中产生root.js，而后者又取决于dep.js。像这样：

// ==== dep.js ====
console.log('A');

// ==== root.js ====
require('dep.js');

现在，我想修改webpack配置以生成2个文件-indexA.js和indexB.js，具体取决于dep.js-depA.js和depB.js的2种修改，但保留root.js完整或几乎完整。

理想情况下，我想要类似的东西：

// ==== depA.js ====
console.log('A');

// ==== depB.js ====
console.log('B');

// ==== root.js ====
require(`dep${VARIANT}.js`)

并且在webpack.config.js中具有以下内容：

['A', 'B'].map(VARIANT => ...)

，结果分别为indexA.js（包括（不含） depB.js）和indexB.js（包括不包括 depA.js）

我已经检查过webpack.DefinePlugin，但仍然无法想象它如何协同工作。

Answer 1

我终于能够实现自己的目标：

• 在webpack.config.js内使用webpack.DefinePlugin在编译时注入提供的变量值，并修改输出，以便不同的输出将注入不同的变量值。
• 修改了webpack.config.js，使清理dist目录为可选
• 使用构建工具运行webpack两次，并通过环境变量注入不同的变量