使用多个网页包配置分别加载Angular 2及其相关库
我目前有一个angular 2应用程序正在使用webpack 2构建。我让它忽略任何angular或任何第三方库，因为我的目的是让这些库在不同的webpack bundle进程中单独加载/维护（与我的应用程序配置不同的webpack配置）。我希望这样做，以便可以更新这些库，而无需在我的应用程序或使用这些库的任何其他应用程序上重新运行webpack。我目前使用的是一个网页包DLL，但我仍然有一个问题，如果我更新了该网页包DLL，应用程序仍然需要重新绑定，以便与新模块ID“重新同步”。由于许多应用程序都指向这个“核心”包，您可以想象这将是一件乏味的事情。我不希望这些经常改变，但我想有它的自由 当我运行应用程序时，会出现错误，因为我的应用程序代码在angular库中找不到诸如“Output”、“Input”等内容。有人知道我如何包括angular、rxjs、zone、core js等等吗。在脚本标记、单独的webpack捆绑包或其他方式中，应用程序webpack捆绑包能够了解并使用这些库吗？像lodash这样的东西工作得很好，因为它们是作为全局变量加载的，但是对于angular 2，我不能以同样的方式得到它 我尝试创建一个网页包“供应商”包，其中只包含angular 2库及其依赖项，如zone和rxjs。我已在输出上设置了使用多个网页包配置分别加载Angular 2及其相关库,angular,webpack,webpack-2,Angular,Webpack,Webpack 2,我目前有一个angular 2应用程序正在使用webpack 2构建。我让它忽略任何angular或任何第三方库，因为我的目的是让这些库在不同的webpack bundle进程中单独加载/维护（与我的应用程序配置不同的webpack配置）。我希望这样做，以便可以更新这些库，而无需在我的应用程序或使用这些库的任何其他应用程序上重新运行webpack。我目前使用的是一个网页包DLL，但我仍然有一个问题，如果我更新了该网页包DLL，应用程序仍然需要重新绑定，以便与新模块ID“重新同步”。由于许多应用程
librarylibraryTargetexternals如果有人想查看我的网页配置文件中的部分，请随意询问。我设法解决了这个问题。对于任何想做同样事情的人来说，以下是需要发生的事情 您需要为angular库及其依赖项中的每个umd模块添加脚本标记，或者像我所做的那样创建一个gulp任务，以正确的顺序连接这些库，并创建一个包含脚本标记中的代码和引用的供应商文件 加载umd模块后，您可以告诉webpack配置忽略特定模块，并使用
externalsexternals: [
{
'hammerjs': 'Hammer',
'lodash': '_',
'core-js/es6': 'core',
'core-js/es7/reflect': 'core',
'zone.js/dist/zone': 'Zone',
'@angular/core': 'ng.core',
'@angular/compiler': 'ng.compiler',
'@angular/common': 'ng.common',
'@angular/platform-browser': 'ng.platformBrowser',
'@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic',
'@angular/http': 'ng.http',
'@angular/router': 'ng.router',
'@angular/forms': 'ng.forms',
'@angular/flex-layout': 'ng.flexLayout',
'@angular/material': 'ng.material'
},
function(context, request, callback) {
if (/^rxjs/.test(request)) {
return callback(null, 'Rx');
}
callback();
}
],
Rx// Third party JavaScript libs
'./node_modules/hammerjs/hammer.min.js', // Required by @angular/material
'./node_modules/lodash/lodash.min.js',
// Polyfills (required by @angular/*)
'./node_modules/core-js/client/shim.min.js',
'./node_modules/zone.js/dist/zone.min.js',
// RxJS
'./node_modules/rxjs/bundles/Rx.min.js', // Required by @angular/*
// Angular Framework (order matters)
'./node_modules/@angular/core/bundles/core.umd.min.js',
'./node_modules/@angular/common/bundles/common.umd.min.js',
'./node_modules/@angular/compiler/bundles/compiler.umd.min.js', // Don't need this if using AoT...
'./node_modules/@angular/platform-browser/bundles/platform-browser.umd.min.js', // Used for AoT
'./node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js', // Used for JiT
'./node_modules/@angular/http/bundles/http.umd.min.js',
'./node_modules/@angular/forms/bundles/forms.umd.min.js',
'./node_modules/@angular/router/bundles/router.umd.min.js',
// Third party Angular libraries
'./node_modules/@angular/flex-layout/bundles/flex-layout.umd.js',
'./node_modules/@angular/material/bundles/material.umd.js'