基于配置的 Webpack 多个 bundle答案

【问题标题】：Webpack multiple bundle based on configuration基于配置的 Webpack 多个 bundle
【发布时间】：2017-04-27 08:49:06
【问题描述】：

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

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

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

或者

c1-app.js、c2-app.js、c3-app.js 将具有基于配置的通用和特定 js 代码，例如我想与哪个包绑定哪些文件。

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

【问题讨论】：

你试过CommonsChunkPluginwebpack.js.org/plugins/commons-chunk-plugin或dllPlugin吗？尝试阅读此robertknight.github.io/posts/webpack-dll-plugins

标签： javascript webpack ecmascript-6 bundle

【解决方案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 块将被视为死代码，并将被压缩程序删除。

【讨论】：

今晚试试。