feat(@angular/cli): add scope hoisting

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-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",
@@ -98,8 +98,8 @@
     "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": "~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/commands/build.ts

@@ -43,7 +43,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

@@ -60,6 +60,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

@@ -113,6 +113,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 (<any>webpack).HashedModuleIdsPlugin(),
+      new (webpack.optimize as any).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",
@@ -83,8 +83,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.SuppressExtractedTextChunksWebpackPlugin:
           this._addImport('@angular/cli/plugins/webpack', plugin.constructor.name);

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();
     })