Динамический System.import с веб-пакетом?

Предыдущие ответы были правильными, но теперь в webpack 2.2 + babel (на момент написания v2.2.0-rc.3 — последняя версия), мы можем это сделать. Я не проверял себя, но только что провел исследование, которое привело меня сюда.

Прочтите это в документации по веб-пакету: Разделение кода с помощью es2015

Чуть ниже этого раздела находятся Динамические выражения с этим примером:

function route(path, query) {
  return import("./routes/" + path + "/route")
    .then(route => new route.Route(query));
}
// This creates a separate chunk for each possible route

Обязательно обратите внимание, что вам потребуется установить плагин Syntax Dynamic Import, как упоминает документ.

Webpack 1 не поддерживает System.import, вы можете обойти это, используя require.ensure Webpack для динамической загрузки модулей. Подробности этого подхода можно найти здесь: https://webpack.github.io/docs/code-splitting.html#es6-modules

В зависимости от того, что именно вы хотите сделать, вам также может понадобиться использовать функцию Webpack context, см. здесь дополнительную информацию https://webpack.github.io/docs/context.html

Webpack 2 должен решить эти проблемы, поскольку он будет напрямую поддерживать ES6 и System.import.

У вас нет такой вещи, как «динамическая загрузка» в веб-пакете (поскольку упаковщик должен перейти ко всем вашим зависимостям модуля). Самое близкое к тому, чего вы хотите достичь (и правильный способ сделать это в веб-пакете), - это использовать require.ensure - см. документацию.

Один из способов превратить ваш код SystemJS в веб-пакет:

function load(moduleName) {
    switch (moduleName) {
        case 'foo':
            require.ensure([], require) => {
                const foo = require('./foo.js');
                // do something with it
            }
            break;
        case 'bar':
            require.ensure([], require) => {
                const bar = require('./bar.js');
                // do something with it
            }
            break;
    }
}

Я бы посоветовал вам сделать функцию загрузки, инкапсулирующую каждый require.ensure (вы можете по-другому управлять обратными вызовами).

Вы можете посмотреть пример здесь

Вы можете попробовать использовать такую ​​библиотеку, как little-loader, чтобы справиться с этим. Пример:

var load = require('little-loader');

load('<src>', function(err) {
    // loaded now, do something
});