feat(@angular/cli): add scope hoisting

See the following links for details on scope hoisting:
https://medium.com/webpack/webpack-freelancing-log-book-week-5-7-4764be3266f5
https://medium.com/webpack/webpack-freelancing-log-book-week-8-e73811deb412

Node's global was also remove, since it seemed to affect optimization
gains. It's still enabled for `ng serve` with live reload, since that
functionality needs it.

Author: filipesilva

package.json

@@ -95,7 +95,7 @@
     "typescript": "~2.3.1",
     "url-loader": "^0.5.7",
     "walk-sync": "^0.3.1",
-    "webpack": "~2.4.0",
+    "webpack": "~3.0.0",
     "webpack-dev-middleware": "^1.10.2",
     "webpack-dev-server": "~2.4.5",
     "webpack-merge": "^2.4.0",

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/common.ts

@@ -106,7 +106,7 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
     ].concat(extraPlugins),
     node: {
       fs: 'empty',
-      global: true,
+      global: false,
       crypto: 'empty',
       tls: 'empty',
       net: 'empty',

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

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

@@ -80,7 +80,7 @@
     "typescript": ">=2.0.0 <2.4.0",
     "url-loader": "^0.5.7",
     "walk-sync": "^0.3.1",
-    "webpack": "~2.4.0",
+    "webpack": "~3.0.0",
     "webpack-dev-middleware": "^1.10.2",
     "webpack-dev-server": "~2.4.5",
     "webpack-merge": "^2.4.0",

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

@@ -164,6 +164,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.GlobCopyWebpackPlugin:
         case angularCliPlugins.SuppressExtractedTextChunksWebpackPlugin:
@@ -413,6 +416,8 @@ export default Task.extend({
     }
 
     const webpackConfig = new NgCliWebpackConfig(runTaskOptions, appConfig).buildConfig();
+    // Without node['global'] = true, webpack-dev-server will break at runtime due to sockjs.
+    webpackConfig.node['global'] = true;
     const serializer = new JsonWebpackSerializer(process.cwd(), outputPath, appConfig.root);
     const output = serializer.serialize(webpackConfig);
     const webpackConfigStr = `${serializer.generateVariables()}\n\nmodule.exports = ${output};\n`;

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

@@ -103,8 +103,12 @@ export default Task.extend({
           `);
         }
       }
+      // Live reload needs an additional entry point.
       if (!webpackConfig.entry.main) { webpackConfig.entry.main = []; }
       webpackConfig.entry.main.unshift(...entryPoints);
+      // Live reload required the node `global` to be set to true.
+      if (!webpackConfig.node) { webpackConfig.node = {}; }
+      webpackConfig.node.global = true;
     } else if (serveTaskOptions.hmr) {
       ui.writeLine(yellow('Live reload is disabled. HMR option ignored.'));
     }

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

tests/e2e/tests/misc/common-async.ts

@@ -8,6 +8,10 @@ import {appendToFile} from '../../utils/fs';
 
 export default function() {
   let oldNumberOfFiles = 0;
+
+  // webpack 2.5.1+ has a bug with CommonsChunkPlugin
+  // https://github.com/webpack/webpack/issues/4850
+
   return Promise.resolve()
     .then(() => ng('build'))
     .then(() => oldNumberOfFiles = readdirSync('dist').length)

tests/e2e/tests/test/test-assets.ts

@@ -19,7 +19,7 @@ export default function () {
       // Not using `async()` in tests as it seemed to swallow `fetch()` errors
       'src/app/app.component.spec.ts': stripIndent`
         describe('Test Runner', () => {
-          const fetch = global['fetch'];
+          const fetch = window['fetch'];
           it('should serve files in assets folder', (done) => {
             fetch('/assets/file.txt')
               .then(response => response.text())