Webpack. Is it possible to make entry-point dependent import?

Question

I have application with multiple entry points, bundled by webpack 1.13.2. I am also using ES2015 modules and babel with es-2015 preset.

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

And I want conditional imports for particular module. Import should depend on entry point. Something like this:

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

How can I achieve it?

Answer 1

Well, it's a question that comes up quite often. You cannot have conditional imports in javascript, dependencies are static properties of the modules. You have basically two options:

Object-oriented solution using dependency inversion

Use a common module and provide a configurator function for it. For example:

// 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);

Static config using aliases

Configure separate build tasks for the entries, and configure them with:

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