Webpack的CommonsChunkPlugin与"import * as“的使用

Question

我学了好一阵子的Webpack，遇到了一个奇怪的行为。

正如Webpack Introduction on angular.io中所述，我正在将我的所有供应商模块导入到vendor.ts-file中，将所有polyfills导入到polyfill.ts-file中，并在main.ts-file中初始化我的应用程序。因此，我在我的配置中为Webpack添加了以下入口点和CommonsChunkPlugin：

// 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-file中。vendor.ts-file看起来如下所示：

// 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-module被写入到app.js中，因为我也将它导入到那里，尽管它也应该与vendor.ts-file共享依赖项。

// 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');时，它确实起作用了。

怎么了？那么为什么所有的angular导入都在工作呢？

Answer 1

在vendor.ts中使用与Angular导入相同的语法，例如：import 'webfontloader'而不是import * as似乎可以工作。不出所料，一切都会在vendor.js中结束。老实说，我不知道它为什么会这样工作的技术细节。