Question

我和Webpack合作了一点。我知道谁做多个捆绑包取决于多个入口点，但我有一个新的情况。

我们的一个项目为3个不同的国家（3个不同的网址和不同的网址结构）提供了单一的代码库。我们为C1，C2，C3设置了通用代码和代码。我想运行一个构建并在两个不同的文件中编译ES6代码，比如

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

或者

c1-app.js，c2-app.js，c3-app.js将在配置中包含常见的和特定的js代码，例如我想要绑定哪些文件包。

有没有现成的方法或如何实现这一目标？任何人都可以帮忙解决任何想法或资源吗？

先谢谢

Ariful

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块将被视为死码，并将被缩小器删除。

基于配置的Webpack多包

1 个答案: