Webpack의 CommonsChunkPlugin 및 "가져 오기 * as"사용

Question

나는 Webpack을 꽤 오래 배우고 이상한 행동을 보았습니다.

나는 vendor.ts -file에 내 모든 공급 업체의 모듈을 수입하고있는 Webpack Introduction on angular.io 에서 설명한 바와 같이

의 polyfill.ts - 파일에 모든 polyfills과 main.ts - 파일 내에서 내 응용 프로그램을 초기화합니다. 따라서, 나는 웹팩 내 설정에서 다음과 같은 진입 점과 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'] 
}) 

은 결과적으로 웹팩는 vendor.ts 및 app.ts가 사용 공통 모듈을 가지고 실현하고 vendor.js -file 만에 추가해야합니다. 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에 작성됩니다.

// 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와 동일한 구문을 사용합니다 (예 : 대신 import 'webfontloader'). 모든 것이 예상대로 vendor.js에서 끝납니다. 솔직하게 나는 그것이 왜 그렇게 작동하는지에 대한 전문성을 모른다.