Question

我正在学习Webpack很长一段时间，并且遇到了一种奇怪的行为。

如Webpack Introduction on angular.io中所述我将所有供应商模块导入vendor.ts - 文件，所有polyfill导入polyfill.ts - 文件并在main.ts - 文件中初始化我的应用程序。因此，我在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 - 文件中。 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 'webfontloader'而不是import * as似乎有效。所有东西都按照预期在vendor.js中结束。说实话，我不知道它为何如此有效的技术性。

Webpack的CommonsChunkPlugin和＆＃34; import * as＆＃34;

1 个答案: