Webpack的CommonsChunkPlugin和使用「import * as」

我正在學習Webpack很長一段時間，並且遇到了一個奇怪的行爲。Webpack的CommonsChunkPlugin和使用「import * as」

正如Webpack Introduction on angular.io 描述我輸入我所有的廠商模塊到-file，所有polyfills到polyfill.ts -file並初始化main.ts -file內我的應用程序。因此，我增加了以下入口點和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應該認識到，和app.ts具有通用模塊中使用，並將其添加到只有vendor.js -file。該-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，因爲我也在那裏導入它，儘管它也應該與文件共享依賴關係。

// 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');它的工作。

怎麼了？爲什麼所有進口的角加工呢？

來源

2016-08-17 janwo

在vendor.ts中使用與Angular導入相同的語法，例如：import 'webfontloader'而不是import * as似乎可行。正如預期的那樣，一切都以vendor.js結束。說實話，我不知道它爲什麼這樣工作的技術性。

來源

2016-10-10 06:54:57

Webpack的CommonsChunkPlugin和使用「import * as」

回答

相關問題