feat(@angular/cli): add scope hoisting via webpack 3

This should result with significant bundle size reduction.

See https://medium.com/webpack/webpack-3-official-release-15fd2dd8f07b for details.

`--vendor-chunk` now defaults to `false` on `--prod` builds. This was changed because the separate vendor bundle affected potential size reduction from adding scope hoisting, so it became sub-optimal to use a vendor bundle when deploying to production.

Author: filipesilva

package.json

@@ -53,14 +53,14 @@
     "ember-cli-string-utils": "^1.0.0",
     "enhanced-resolve": "^3.1.0",
     "exports-loader": "^0.6.3",
-    "extract-text-webpack-plugin": "^2.1.0",
+    "extract-text-webpack-plugin": "3.0.0-rc.0",
     "file-loader": "^0.10.0",
     "fs-extra": "~3.0.1",
     "get-caller-file": "^1.0.0",
     "glob": "^7.0.3",
     "heimdalljs": "^0.2.4",
     "heimdalljs-logger": "^0.1.9",
-    "html-webpack-plugin": "^2.19.0",
+    "html-webpack-plugin": "^2.29.0",
     "inflection": "^1.7.0",
     "inquirer": "^3.0.0",
     "isbinaryfile": "^3.0.0",
@@ -97,9 +97,9 @@
     "typescript": "~2.3.1",
     "url-loader": "^0.5.7",
     "walk-sync": "^0.3.1",
-    "webpack": "~2.4.0",
-    "webpack-dev-middleware": "^1.10.2",
-    "webpack-dev-server": "~2.4.5",
+    "webpack": "~3.1.0",
+    "webpack-dev-middleware": "^1.11.0",
+    "webpack-dev-server": "~2.5.1",
     "webpack-merge": "^2.4.0",
     "zone.js": "^0.8.4"
   },

packages/@angular/cli/commands/build.ts

@@ -48,7 +48,6 @@ export const baseBuildCommandOptions: any = [
   {
     name: 'vendor-chunk',
     type: Boolean,
-    default: true,
     aliases: ['vc'],
     description: 'Use a separate bundle containing only vendor libraries.'
   },

packages/@angular/cli/models/webpack-config.ts

@@ -79,13 +79,15 @@ export class NgCliWebpackConfig {
         environment: 'dev',
         outputHashing: 'media',
         sourcemaps: true,
-        extractCss: false
+        extractCss: false,
+        vendorChunk: true
       },
       production: {
         environment: 'prod',
         outputHashing: 'all',
         sourcemaps: false,
         extractCss: true,
+        vendorChunk: false,
         aot: true
       }
     };

packages/@angular/cli/models/webpack-configs/browser.ts

@@ -69,6 +69,7 @@ export function getBrowserConfig(wco: WebpackConfigOptions) {
         baseHref: buildOptions.baseHref
       }),
       new webpack.optimize.CommonsChunkPlugin({
+        name: 'main',
         async: 'common',
         children: true,
         minChunks: 2

packages/@angular/cli/models/webpack-configs/common.ts

@@ -106,6 +106,8 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
     ].concat(extraPlugins),
     node: {
       fs: 'empty',
+      // `global` should be kept true, removing it resulted in a
+      // massive size increase with NGO on AIO.
       global: true,
       crypto: 'empty',
       tls: 'empty',

packages/@angular/cli/models/webpack-configs/production.ts

@@ -98,6 +98,7 @@ export const getProdConfig = function (wco: WebpackConfigOptions) {
         'NODE_ENV': 'production'
       }),
       new webpack.HashedModuleIdsPlugin(),
+      new webpack.optimize.ModuleConcatenationPlugin(),
       new webpack.optimize.UglifyJsPlugin(<any>{
         mangle: { screw_ie8: true },
         compress: { screw_ie8: true, warnings: buildOptions.verbose },

packages/@angular/cli/package.json

@@ -41,14 +41,14 @@
     "ember-cli-normalize-entity-name": "^1.0.0",
     "ember-cli-string-utils": "^1.0.0",
     "exports-loader": "^0.6.3",
-    "extract-text-webpack-plugin": "^2.1.0",
+    "extract-text-webpack-plugin": "3.0.0-beta.3",
     "file-loader": "^0.10.0",
     "fs-extra": "^3.0.1",
     "get-caller-file": "^1.0.0",
     "glob": "^7.0.3",
     "heimdalljs": "^0.2.4",
     "heimdalljs-logger": "^0.1.9",
-    "html-webpack-plugin": "^2.19.0",
+    "html-webpack-plugin": "^2.29.0",
     "inflection": "^1.7.0",
     "inquirer": "^3.0.0",
     "isbinaryfile": "^3.0.0",
@@ -82,8 +82,8 @@
     "typescript": ">=2.0.0 <2.4.0",
     "url-loader": "^0.5.7",
     "walk-sync": "^0.3.1",
-    "webpack": "~2.4.0",
-    "webpack-dev-middleware": "^1.10.2",
+    "webpack": "~3.0.0",
+    "webpack-dev-middleware": "^1.11.0",
     "webpack-dev-server": "~2.4.5",
     "webpack-merge": "^2.4.0",
     "zone.js": "^0.8.4"

packages/@angular/cli/tasks/eject.ts

@@ -174,6 +174,9 @@ class JsonWebpackSerializer {
         case webpack.optimize.UglifyJsPlugin:
           this._addImport('webpack.optimize', 'UglifyJsPlugin');
           break;
+        case (webpack.optimize as any).ModuleConcatenationPlugin:
+          this._addImport('webpack.optimize', 'ModuleConcatenationPlugin');
+          break;
         case angularCliPlugins.BaseHrefWebpackPlugin:
         case angularCliPlugins.NamedLazyChunksWebpackPlugin:
         case angularCliPlugins.SuppressExtractedTextChunksWebpackPlugin:

packages/@angular/cli/webpack-custom-typings.d.ts

@@ -7,4 +7,9 @@ declare module 'webpack' {
   export class HashedModuleIdsPlugin {
     constructor();
   }
+  namespace optimize {
+    export class ModuleConcatenationPlugin {
+      constructor();
+    }
+  }
 }

scripts/test-licenses.js

@@ -64,6 +64,7 @@ const licenseReplacements = [
 // TODO(hansl): review these
 const ignoredPackages = [
   'async-foreach@0.1.3', // MIT, but doesn't list it in package.json
+  'buffer-indexof@1.1.0', // MIT, but doesn't list it in package.json.
   'directory-encoder@0.7.2', // MIT, but doesn't list it in package.json
   'domelementtype@1.1.3', // Looks like MIT
   'domelementtype@1.3.0', // Looks like MIT
@@ -81,6 +82,7 @@ const ignoredPackages = [
   'progress@1.1.8', // MIT, but doesn't list it in package.json
   'samsam@1.1.2', // BSD, but doesn't list it in package.json
   'stdout-stream@1.4.0', // MIT, but doesn't list it in package.json
+  'thunky@0.1.0', // MIT, but doesn't list it in package.json.
   'uglify-js@2.3.6', // BSD, but doesn't list it in package.json
   'undefined@undefined', // Test package with no name nor version.
   'verror@1.3.6', // Looks like MIT

tests/e2e/tests/build/chunk-hash.ts

@@ -61,11 +61,11 @@ export default function() {
     `, '@angular/router'))
     .then(() => addImportToModule(
       'src/app/app.module.ts', 'ReactiveFormsModule', '@angular/forms'))
-    .then(() => ng('build', '--prod'))
+    .then(() => ng('build', '--output-hashing=all'))
     .then(() => {
       oldHashes = generateFileHashMap();
     })
-    .then(() => ng('build', '--prod'))
+    .then(() => ng('build', '--output-hashing=all'))
     .then(() => {
       newHashes = generateFileHashMap();
     })
@@ -74,16 +74,16 @@ export default function() {
       oldHashes = newHashes;
     })
     .then(() => writeFile('src/styles.css', 'body { background: blue; }'))
-    .then(() => ng('build', '--prod'))
+    .then(() => ng('build', '--output-hashing=all'))
     .then(() => {
       newHashes = generateFileHashMap();
     })
     .then(() => {
-      validateHashes(oldHashes, newHashes, ['styles']);
+      validateHashes(oldHashes, newHashes, ['inline', 'styles']);
       oldHashes = newHashes;
     })
     .then(() => writeFile('src/app/app.component.css', 'h1 { margin: 10px; }'))
-    .then(() => ng('build', '--prod'))
+    .then(() => ng('build', '--output-hashing=all'))
     .then(() => {
       newHashes = generateFileHashMap();
     })
@@ -93,7 +93,7 @@ export default function() {
     })
     .then(() => addImportToModule(
       'src/app/lazy/lazy.module.ts', 'ReactiveFormsModule', '@angular/forms'))
-    .then(() => ng('build', '--prod'))
+    .then(() => ng('build', '--output-hashing=all'))
     .then(() => {
       newHashes = generateFileHashMap();
     })