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

Posted 2023-03-15

【中文标题】Webpack 的 CommonsChunkPlugin 和“import * as”的使用

【英文标题】：Webpack's CommonsChunkPlugin and the use of "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'); 时，它确实有效。

怎么了？那么为什么所有进口的角度都在起作用？

【参考方案1】：

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