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

bundling-and-minification, ecmascript-6, javascript, webpack

Solution

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"
        }
    }
    ...
}

Problem

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?

Original source