Webpack。是否可以进行依赖入口的导入？

Question

我有由webpack 1.13.2捆绑的具有多个入口点的应用程序。我还使用ES2015模块和带有es-2015预设的babel。

entry: {
        entry1: "app/somechunk/entry1.js",
        entry2: "app/somechunk2/entry2.js"
}

我想要特定模块的条件导入。导入应取决于入口点。像这样：

if(entry1){
    import locale from 'app/somechunk/localeDictionary1.js'
} else {
    import locale from 'app/somechunk2/localeDictionary2.js'
}

我该如何实现？

Answer 1

好吧，这个问题经常出现。您不能在javascript中进行条件导入，依赖项是模块的静态属性。您基本上有两个选择：

使用依赖反转的面向对象解决方案

使用通用模块并为其提供配置器功能。例如：

// locale.js
export var dictionary = {};
export function setDictionary(dict) {
  dictionary = dict;
}

// locale-en.js
import { setDictionary } from "./locale";
setDictionary({ yes: "yes" });

// locale-hu.js
import { setDictionary } from "./locale";
setDictionary({ yes: "igen" });

// entries/entry-hu.js
import "../locales/locale-hu";
import "../application";

// entries/entry-en.js
import "../locales/locale-en";
import "../application";

// application.js
import { dictionary } from "./locales/locale";
console.log(dictionary);

使用别名的静态配置

为条目配置单独的构建任务，并使用以下命令配置它们：

{
    entry: "entry.js",
    resolve: {
        alias: {
            "locale": "/locale/locale-en.js"
        }
    }
    ...
}