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.
angular · Jun 12, 2017 · 2c588dc · 2c588dc
1 parent 01cbf65
commit 2c588dc
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 11 deletions.
diff --git a/package.json b/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-rc.1",
     "webpack-dev-middleware": "^1.10.2",
     "webpack-dev-server": "~2.4.5",
     "webpack-merge": "^2.4.0",

diff --git a/packages/@angular/cli/models/webpack-config.ts b/packages/@angular/cli/models/webpack-config.ts
@@ -86,7 +86,8 @@ export class NgCliWebpackConfig {
         outputHashing: 'all',
         sourcemaps: false,
         extractCss: true,
-        aot: true
+        aot: true,
+        vendorChunk: false
       }
     };
 

diff --git a/packages/@angular/cli/models/webpack-configs/common.ts b/packages/@angular/cli/models/webpack-configs/common.ts
@@ -98,7 +98,7 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
     ].concat(extraPlugins),
     node: {
       fs: 'empty',
-      global: true,
+      global: false,
       crypto: 'empty',
       tls: 'empty',
       net: 'empty',

diff --git a/packages/@angular/cli/models/webpack-configs/production.ts b/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 },

diff --git a/packages/@angular/cli/package.json b/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-rc.1",
     "webpack-dev-middleware": "^1.10.2",
     "webpack-dev-server": "~2.4.5",
     "webpack-merge": "^2.4.0",

diff --git a/packages/@angular/cli/tasks/serve.ts b/packages/@angular/cli/tasks/serve.ts
@@ -94,8 +94,12 @@ export default Task.extend({
           `);
         }
       }
+      // Live reload 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(chalk.yellow('Live reload is disabled. HMR option ignored.'));
     }

diff --git a/tests/e2e/tests/build/chunk-hash.ts b/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();
     })

diff --git a/tests/e2e/tests/test/test-assets.ts b/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())