javascript - 基于配置的Webpack多重 bundle

Question

我曾经使用过一些 Webpack。我知道谁做多个 bundle 取决于多个入口点，但我有一个新情况。

我们的一个项目拥有针对 3 个不同国家/地区的单一代码库(3 个不同的 URL 和不同的 URL 结构)。我们有一组通用代码和 C1、C2、C3 代码。我想运行单个构建并将 ES6 代码编译到 2 个不同的文件中，例如

app-common.js、c1-common.js、c2-common.js、c3-common.j2

或者

c1-app.js、c2-app.js、c3-app.js 其中将具有通用和特定的 js 代码基础在配置上，比如我想将哪些文件与哪个 bundle 绑定(bind)。

有没有现有的方法可以做到这一点或如何实现这一点？

Answer 1

您可以为本地化代码创建单个入口点文件，并根据自定义环境变量执行条件 require 语句。然后在你的 webpack 配置中进行设置:

new webpack.DefinePlugin({
    'process.env.COUNTRY_CODE': 'fr'
}),

然后在您的代码中:

let i18n_config;
const country = process.env.COUNTRY_CODE || 'en';

if (country === 'en') {
    i18n_config = require("./i18n/en.js");
}
if (country === 'fr') {
    i18n_config = require("./i18n/fr.js");
}

您可以更进一步，使用激进的压缩器来删除死代码:

const isEN = country === 'en';
const isFR = country === 'fr';

if (isEN) {
    i18n_config = require("./i18n/en.js");
}
if (isFR) {
    i18n_config = require("./i18n/fr.js");
}
// ... and so on

您的 if 语句将编译为 if (true) {...} 或 if (false) {...}。 false block 将被视为死代码，并将被压缩器删除。