Webpack 的 CommonsChunkPlugin 和“import * as”的使用答案

【问题标题】：Webpack's CommonsChunkPlugin and the use of "import * as"Webpack 的 CommonsChunkPlugin 和“import * as”的使用
【发布时间】：2016-08-17 11:44:19
【问题描述】：

我学习 Webpack 已经有一段时间了，遇到了一个奇怪的行为。

如Webpack Introduction on angular.io 中所述我将所有供应商模块导入vendor.ts-文件，所有polyfills 导入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-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 webpack webfont-loader commonschunkplugin

【解决方案1】：

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

【讨论】：