chore(Webpack): add chunk support

* chore(webpack): add helpers for webpack usage

* chore(git): update gitignore

* chore(npm): update angular,ng-metadata

* chore(webpack): add chunk support

* chore(app): rename bootstrap to main to reflect angular 2 best practice
- remove manually imported vendors+polyfills

* chore(webpack): remove unnecessary helpers and simplify chunkSortMode

* chore(webpack): remove unnecessary commented code and simplify commonChunks resolving

.gitignore

@@ -6,3 +6,4 @@ typings
 dist
 coverage
 ts-out
+npm-debug.log

package.json

@@ -29,13 +29,13 @@
   ],
   "license": "ISC",
   "dependencies": {
-    "angular": "1.5.3",
-    "ng-metadata": "1.8.0",
+    "angular": "1.5.5",
+    "ng-metadata": "1.9.0",
     "reflect-metadata": "0.1.3",
     "ts-helpers": "1.1.1"
   },
   "devDependencies": {
-    "angular-mocks": "1.5.3",
+    "angular-mocks": "1.5.5",
     "codelyzer": "0.0.18",
     "copy-webpack-plugin": "1.1.1",
     "css-loader": "0.23.1",

src/bootstrap.ts → src/main.ts

@@ -1,6 +1,3 @@
-import './polyfills';
-import './vendor';
-
 import { bootstrap } from 'ng-metadata/platform';
 import { AppModule } from './app/app';
 

webpack-build.config.js

@@ -18,10 +18,6 @@ const webpackConfigPlugins = [
   // Only emit files when there are no errors
   new webpack.NoErrorsPlugin(),
 
-  // Reference: http://webpack.github.io/docs/list-of-plugins.html#occurenceorderplugin
-  // Assign the module and chunk ids by occurrence count. Ids that are used often get lower (shorter) ids.
-  new webpack.optimize.OccurenceOrderPlugin( true ),
-
   // Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
   // Dedupe modules in the output
   new webpack.optimize.DedupePlugin(),

webpack-test.config.js

@@ -11,6 +11,18 @@ const webpackConfig = require( './webpack.config' );
 const webpackDevtool = 'inline-source-map';
 
 const webpackPostLoaders = [
+
+  /*
+   * Tslint loader support for *.ts files
+   *
+   * See: https://github.com/wbuchwalter/tslint-loader
+   */
+  {
+    test: /\.ts$/,
+    loader: 'tslint-loader',
+    exclude: [ /node_modules/ ]
+  },
+
   /**
    * Instruments JS files with Istanbul for subsequent code coverage reporting.
    * Instrument only testing sources.
@@ -45,6 +57,7 @@ Object.assign( webpackConfig, {
   output: {},
   devtool: webpackDevtool,
   watch: false,
+  plugins: [],
   node: Object.assign( webpackConfig.node, webpackNode )
 } );
 Object.assign( webpackConfig.module, {

webpack.config.js

@@ -46,7 +46,9 @@ const webpackConfigEntryPoints = {
    *
    * See: http://webpack.github.io/docs/configuration.html#entry
    */
-  app: path.resolve( ROOT, 'bootstrap.ts' )
+  polyfills: path.resolve( ROOT, 'polyfills.ts' ),
+  vendor: path.resolve( ROOT, 'vendor.ts' ),
+  main: path.resolve( ROOT, 'main.ts' )
 };
 
 /**
@@ -65,11 +67,12 @@ const webpackPreLoaders = [
    *
    * See: https://github.com/wbuchwalter/tslint-loader
    */
-  {
-    test: /\.ts$/,
-    loader: 'tslint-loader',
-    exclude: [ /node_modules/ ]
-  },
+  // @TODO codelyzer is breaking somehow source maps, allow this when it will be resolved
+  // {
+  //   test: /\.ts$/,
+  //   loader: 'tslint-loader',
+  //   exclude: [ /node_modules/ ]
+  // },
 
   /**
    * Source map loader support for *.js files
@@ -142,16 +145,26 @@ const webpackConfigLoaders = [
 const webpackConfigPlugins = [
 
   /**
-   * Plugin: HtmlWebpackPlugin
-   * Description: Simplifies creation of HTML files to serve your webpack bundles.
-   * This is especially useful for webpack bundles that include a hash in the filename
-   * which changes every compilation.
+   * Plugin: OccurenceOrderPlugin
+   * Description: Varies the distribution of the ids to get the smallest id length
+   * for often used ids.
    *
-   * See: https://github.com/ampedandwired/html-webpack-plugin
+   * See: https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin
+   * See: https://github.com/webpack/docs/wiki/optimization#minimize
    */
-  new HtmlWebpackPlugin( {
-    template: path.resolve( ROOT, 'index.html' )
-  } ),
+  new webpack.optimize.OccurenceOrderPlugin( true ),
+
+  /**
+   * Plugin: CommonsChunkPlugin
+   * Description: Shares common code between the pages.
+   * It identifies common modules and put them into a commons chunk.
+   *
+   * See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
+   * See: https://github.com/webpack/docs/wiki/optimization#multi-page-app
+   */
+  new webpack.optimize.CommonsChunkPlugin({
+    name: [ 'vendor', 'polyfills' ]
+  }),
 
   /**
    * Plugin: CopyWebpackPlugin
@@ -166,7 +179,20 @@ const webpackConfigPlugins = [
       from: 'src/assets',
       to: './'
     }
-  ] )
+  ] ),
+
+  /**
+   * Plugin: HtmlWebpackPlugin
+   * Description: Simplifies creation of HTML files to serve your webpack bundles.
+   * This is especially useful for webpack bundles that include a hash in the filename
+   * which changes every compilation.
+   *
+   * See: https://github.com/ampedandwired/html-webpack-plugin
+   */
+  new HtmlWebpackPlugin( {
+    template: path.resolve( ROOT, 'index.html' ),
+    chunksSortMode: () => [ 'polyfills', 'vendor', 'main' ]
+  } )
 
 ];
 
@@ -224,7 +250,14 @@ module.exports = {
      *
      * See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
      */
-    sourceMapFilename: '[name].map'
+    sourceMapFilename: '[name].map',
+
+    /** The filename of non-entry chunks as relative path
+     * inside the output.path directory.
+     *
+     * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
+     */
+    chunkFilename: '[id].chunk.js'
   },
   resolve: {
     /**