Angular2 bundle node_modules solamente y no código de aplicación

Angular v.4 y webpack

Estoy buscando respuesta de pregunta muy simple.

¿Cómo puedo agrupar la carpeta node_module como vendor.js pero no su código de aplicación? en la carga de la página parece que hay más de 300 solicitudes de código angular para cargar archivos internos.

Si soy capaz de combinar todas las bibliotecas de node_modules guardaré muchas solicitudes de navegador.

Seguí este ejemplo , pude ejecutarlo, pero también incluye las bibliotecas y el código de su aplicación. Pude generar exitosamente el proveedor vend.js solo pero no estoy seguro después de agregar vendedor.js en index.html cómo mi código de aplicación reconocerá las referencias de @angular lib. actualmente se está resolviendo usando systemjs.config.js algo como esto

 @angular/code : 'npm:@angular/code/bundle/core.umd.js' .. .. 

y eso es exactamente lo que sucedió cuando pensé que la aplicación se bloqueó porque no puede encontrar referencias a @angular desde el código de mi aplicación.

¿Es posible simplemente agrupar la carpeta node_module en vendor.js y seguir utilizándolo en el código de mi aplicación sin el código de la aplicación?

añadiendo configuración webpack

webpack.config.js

 module.exports = require('./config/webpack.prod.js'); 

webpack.common.js

 var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var helpers = require('./helpers'); module.exports = { entry: { 'polyfills': './src/polyfills.ts', 'vendor': './src/vendor.ts', 'app': './src/main.ts' }, resolve: { extensions: ['.ts', '.js'] }, module: { rules: [ { test: /\.ts$/, loaders: [ { loader: 'awesome-typescript-loader', options: { configFileName: helpers.root('src', 'tsconfig.json') } } , 'angular2-template-loader' ] }, { test: /\.html$/, loader: 'html-loader' }, { test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, loader: 'file-loader?name=assets/[name].[hash].[ext]' }, { test: /\.css$/, exclude: helpers.root('src', 'app'), loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' }) }, { test: /\.css$/, include: helpers.root('src', 'app'), loader: 'raw-loader' } ] }, plugins: [ // Workaround for angular/angular#11580 new webpack.ContextReplacementPlugin( // The (\\|\/) piece accounts for path separators in *nix and Windows /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, helpers.root('./src'), // location of your src {} // a map of your routes ), new webpack.optimize.CommonsChunkPlugin({ name: ['app', 'vendor', 'polyfills'] }), new HtmlWebpackPlugin({ template: 'src/index.html' }) ] }; 

webpack.prod.js

 var webpack = require('webpack'); var webpackMerge = require('webpack-merge'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var commonConfig = require('./webpack.common.js'); var helpers = require('./helpers'); const ENV = process.env.NODE_ENV = process.env.ENV = 'production'; module.exports = webpackMerge(commonConfig, { devtool: 'source-map', output: { path: helpers.root('dist'), publicPath: '/', filename: '[name].[hash].js', chunkFilename: '[id].[hash].chunk.js' }, plugins: [ new webpack.NoEmitOnErrorsPlugin(), new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618 mangle: { keep_fnames: true } }), new ExtractTextPlugin('[name].[hash].css'), new webpack.DefinePlugin({ 'process.env': { 'ENV': JSON.stringify(ENV) } }), new webpack.LoaderOptionsPlugin({ htmlLoader: { minimize: false // workaround for ng2 } }) ] });