feat(@angular/cli): support sourcemaps and minification in scripts

Author: filipesilva

package-lock.json

@@ -100,6 +100,7 @@
     "url-loader": "^0.5.7",
     "walk-sync": "^0.3.1",
     "webpack": "~3.4.1",
+    "webpack-concat-plugin": "1.4.0",
     "webpack-dev-middleware": "^1.11.0",
     "webpack-dev-server": "~2.5.1",
     "webpack-merge": "^4.1.0",

package.json

@@ -2,9 +2,11 @@ import * as webpack from 'webpack';
 import * as path from 'path';
 import { GlobCopyWebpackPlugin } from '../../plugins/glob-copy-webpack-plugin';
 import { NamedLazyChunksWebpackPlugin } from '../../plugins/named-lazy-chunks-webpack-plugin';
+import { InsertConcatAssetsWebpackPlugin } from '../../plugins/insert-concat-assets-webpack-plugin';
 import { extraEntryParser, getOutputHashFormat } from './utils';
 import { WebpackConfigOptions } from '../webpack-config';
 
+const ConcatPlugin = require('webpack-concat-plugin');
 const ProgressPlugin = require('webpack/lib/ProgressPlugin');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 
@@ -45,12 +47,48 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
   // process global scripts
   if (appConfig.scripts.length > 0) {
     const globalScripts = extraEntryParser(appConfig.scripts, appRoot, 'scripts');
-
-    // add entry points and lazy chunks
-    globalScripts.forEach(script => {
-      let scriptPath = `script-loader!${script.path}`;
-      entryPoints[script.entry] = (entryPoints[script.entry] || []).concat(scriptPath);
+    const globalScriptsByEntry = globalScripts
+      .reduce((prev: { entry: string, paths: string[], lazy: boolean }[], curr) => {
+
+        let existingEntry = prev.find((el) => el.entry === curr.entry);
+        if (existingEntry) {
+          existingEntry.paths.push(curr.path);
+          // All entries have to be lazy for the bundle to be lazy.
+          existingEntry.lazy = existingEntry.lazy && curr.lazy;
+        } else {
+          prev.push({ entry: curr.entry, paths: [curr.path], lazy: curr.lazy });
+        }
+        return prev;
+      }, []);
+
+    // Add a new asset for each entry.
+    globalScriptsByEntry.forEach((script) => {
+      const hash = hashFormat.chunk !== '' && !script.lazy ? '.[hash]' : '';
+      // TODO: check supress and packageChunkSort to remove unused stuff.
+      // TODO: add test for sourcemaps
+      // TODO: add test for lazy scripts
+      // TODO: add test for uglification
+      // TODO: add test for hash
+      // TODO: common-entry, figure out what to do
+      // TODO: show them on stats?
+      extraPlugins.push(new ConcatPlugin({
+        uglify: buildOptions.target === 'production',
+        useHash: hashFormat.chunk !== '' && !script.lazy,
+        sourceMap: buildOptions.sourcemaps,
+        name: script.entry,
+        fileName: `${script.entry}.bundle.js`,
+        // Lazy scripts don't get a hash, otherwise they can't be loaded by name.
+        fileName: `[${script.entry}]${!script.lazy ? '.[hash]' : ''}.bundle.js`,
+        filesToConcat: script.paths
+      }));
     });
+
+    // Insert all the assets created by ConcatPlugin in the right place in index.html.
+    extraPlugins.push(new InsertConcatAssetsWebpackPlugin(
+      globalScriptsByEntry
+        .filter((el) => !el.lazy)
+        .map((el) => el.entry)
+    ));
   }
 
   // process asset entries

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

@@ -73,15 +73,16 @@ export interface HashFormat {
   chunk: string;
   extract: string;
   file: string;
+  script: string;
 }
 
 export function getOutputHashFormat(option: string, length = 20): HashFormat {
   /* tslint:disable:max-line-length */
   const hashFormats: { [option: string]: HashFormat } = {
-    none:    { chunk: '',                       extract: '',                         file: ''                  },
-    media:   { chunk: '',                       extract: '',                         file: `.[hash:${length}]` },
-    bundles: { chunk: `.[chunkhash:${length}]`, extract: `.[contenthash:${length}]`, file: ''                  },
-    all:     { chunk: `.[chunkhash:${length}]`, extract: `.[contenthash:${length}]`, file: `.[hash:${length}]` },
+    none:    { chunk: '',                       extract: '',                         file: ''                 , script: '' },
+    media:   { chunk: '',                       extract: '',                         file: `.[hash:${length}]`, script: ''  },
+    bundles: { chunk: `.[chunkhash:${length}]`, extract: `.[contenthash:${length}]`, file: ''                 , script: '.[hash]'  },
+    all:     { chunk: `.[chunkhash:${length}]`, extract: `.[contenthash:${length}]`, file: `.[hash:${length}]`, script: '.[hash]'  },
   };
   /* tslint:enable:max-line-length */
   return hashFormats[option] || hashFormats['none'];

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

@@ -85,6 +85,7 @@
     "url-loader": "^0.5.7",
     "walk-sync": "^0.3.1",
     "webpack": "~3.4.1",
+    "webpack-concat-plugin": "1.4.0",
     "webpack-dev-middleware": "^1.11.0",
     "webpack-dev-server": "~2.5.1",
     "webpack-merge": "^4.1.0",

packages/@angular/cli/package.json

@@ -0,0 +1,45 @@
+// Add assets from `ConcatPlugin` to index.html.
+
+export class InsertConcatAssetsWebpackPlugin {
+  // Priority list of where to insert asset.
+  private insertAfter = [
+    /polyfills(\.[0-9a-f]{20})?\.bundle\.js/,
+    /inline(\.[0-9a-f]{20})?\.bundle\.js/,
+  ];
+
+  constructor(private entryNames: string[]) { }
+
+  apply(compiler: any): void {
+    compiler.plugin('compilation', (compilation: any) => {
+      compilation.plugin('html-webpack-plugin-before-html-generation',
+        (htmlPluginData: any, callback: any) => {
+
+          const fileNames = this.entryNames.map((entryName) => {
+            const fileName = htmlPluginData.assets.webpackConcat
+              && htmlPluginData.assets.webpackConcat[entryName];
+
+            if (!fileName) {
+              // Something went wrong and the asset was not correctly added.
+              throw new Error(`Cannot find file for ${entryName} script.`);
+            }
+
+            return fileName;
+          });
+
+          let insertAt = 0;
+
+          // TODO: try to figure out if there are duplicate bundle names when adding and throw
+          for (let el of this.insertAfter) {
+            const jsIdx = htmlPluginData.assets.js.findIndex((js: string) => js.match(el));
+            if (jsIdx !== -1) {
+              insertAt = jsIdx + 1;
+              break;
+            }
+          }
+
+          htmlPluginData.assets.js.splice(insertAt, 0, ...fileNames);
+          callback(null, htmlPluginData);
+        });
+    });
+  }
+}