私はかなり長い間Webpackを勉強していて、奇妙な振る舞いをしていました。WebpackのCommonsChunkPluginと "import * as"の使用
Webpack Introduction on angular.io で説明したように、私はpolyfill.ts
-fileに、-fileにすべてのpolyfillsをすべての私のベンダーのモジュールをインポートし、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のはと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
モジュールは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');
に変更
どういうところが間違っていますか?それでは、なぜすべての輸入角度が働いているのですか?