CommonsChunkPlugin Webpack и использование "import * as"

Question

Я довольно давно изучаю Webpack и столкнулся со странным поведением.

Как описано во введении в Webpack на angular.io, я импортирую все свои модули вендора в vendor.ts -файл, все полифилы в polyfill.ts -файл и инициализировать мое приложение в main.ts -файл. Таким образом, я добавил следующие точки входа и CommonsChunkPlugin в мою конфигурацию для Webpack:

// webpack.config.js -->

entry: {
    'polyfill': './src/polyfill.ts', 
    'vendor': './src/vendor.ts',
    'app': './src/main.ts'
}

// ...

new Webpack.optimize.CommonsChunkPlugin({
    name: ['app', 'vendor', 'polyfill']
})

Следовательно, Webpack должен понимать, что vendor.ts а также app.ts имеет общие используемые модули и добавить его в vendor.js -файл только. vendor.ts -файл выглядит так:

// vendor.ts -->

// Angular 2.
import '@angular/platform-browser';

// ...

import '@angular/router';

// RxJS.
import 'rxjs';

// Web Font Loader.
import * as WebFont from 'webfontloader';

// Font Awesome.
import '../node_modules/font-awesome/css/font-awesome.css';

К сожалению, это поведение работает как и ожидалось со всеми модулями, которые я импортировал через import MODULE, но не работает с модулями, которые я импортировал через import * as ALIAS from MODULE, В этом примере webfontloader -модуль записан в app.js как я также импортирую его туда, хотя он должен иметь общие зависимости с vendor.ts -файл также.

// app.ts -->
// Initialize Angular.
platformBrowserDynamic().bootstrapModule(AppModule);

// Load Fonts.
WebFont.load({
   google: {
       families: ['Lato:400,700']
   }
});

Когда я меняюсь import * as WebFont from 'webfontloader'; в let WebFont = require('webfontloader'); это работает.

В чем дело? Почему все импортные угловые работают тогда?

Answer 1

Используя тот же синтаксис в vendor.ts, что и Angular import, например: import 'webfontloader' вместо import * as похоже на работу. Все заканчивается в vendor.js, как и ожидалось. Честно говоря, я не знаю технических деталей, почему это так работает.