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

Author: filipesilva

package-lock.json

@@ -86,7 +86,6 @@
     "rsvp": "^3.0.17",
     "rxjs": "^5.4.2",
     "sass-loader": "^6.0.3",
-    "script-loader": "^0.7.0",
     "semver": "^5.3.0",
     "silent-error": "^1.0.0",
     "source-map": "^0.5.6",
@@ -100,6 +99,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');
 
@@ -15,7 +17,6 @@ const CircularDependencyPlugin = require('circular-dependency-plugin');
  *
  * require('source-map-loader')
  * require('raw-loader')
- * require('script-loader')
  * require('url-loader')
  * require('file-loader')
  * require('@angular-devkit/build-optimizer')
@@ -45,12 +46,40 @@ 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]' : '';
+      extraPlugins.push(new ConcatPlugin({
+        uglify: buildOptions.target === 'production' ? { sourceMapIncludeSources: true } : false,
+        sourceMap: buildOptions.sourcemaps,
+        name: script.entry,
+        // Lazy scripts don't get a hash, otherwise they can't be loaded by name.
+        fileName: `[name]${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

@@ -71,7 +71,6 @@
     "rsvp": "^3.0.17",
     "rxjs": "^5.4.2",
     "sass-loader": "^6.0.3",
-    "script-loader": "^0.7.0",
     "semver": "^5.1.0",
     "silent-error": "^1.0.0",
     "source-map-loader": "^0.2.0",
@@ -85,6 +84,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);
+        });
+    });
+  }
+}

packages/@angular/cli/plugins/insert-concat-assets-webpack-plugin.ts

@@ -8,5 +8,7 @@ module.exports = {
     require('../plugins/suppress-entry-chunks-webpack-plugin')
       .SuppressExtractedTextChunksWebpackPlugin,
   NamedLazyChunksWebpackPlugin:
-    require('../plugins/named-lazy-chunks-webpack-plugin').NamedLazyChunksWebpackPlugin
+    require('../plugins/named-lazy-chunks-webpack-plugin').NamedLazyChunksWebpackPlugin,
+  InsertConcatAssetsWebpackPlugin:
+    require('../plugins/insert-concat-assets-webpack-plugin').InsertConcatAssetsWebpackPlugin
 };

packages/@angular/cli/plugins/webpack.js

@@ -23,6 +23,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const SilentError = require('silent-error');
 const licensePlugin = require('license-webpack-plugin');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
+const ConcatPlugin = require('webpack-concat-plugin');
 const Task = require('../ember-cli/lib/models/task');
 
 const ProgressPlugin = require('webpack/lib/ProgressPlugin');
@@ -85,6 +86,10 @@ class JsonWebpackSerializer {
     };
   }
 
+  private _insertConcatAssetsWebpackPluginSerialize(value: any): any {
+    return value.entryNames;
+  }
+
   private _commonsChunkPluginSerialize(value: any): any {
     let minChunks = value.minChunks;
     switch (typeof minChunks) {
@@ -151,6 +156,10 @@ class JsonWebpackSerializer {
     };
   }
 
+  private _concatPlugin(plugin: any) {
+    return plugin.settings;
+  }
+
   private _pluginsReplacer(plugins: any[]) {
     return plugins.map(plugin => {
       let args = plugin.options || undefined;
@@ -186,6 +195,10 @@ class JsonWebpackSerializer {
           args = this._globCopyWebpackPluginSerialize(plugin);
           this._addImport('@angular/cli/plugins/webpack', 'GlobCopyWebpackPlugin');
           break;
+        case angularCliPlugins.InsertConcatAssetsWebpackPlugin:
+          args = this._insertConcatAssetsWebpackPluginSerialize(plugin);
+          this._addImport('@angular/cli/plugins/webpack', 'InsertConcatAssetsWebpackPlugin');
+          break;
         case webpack.optimize.CommonsChunkPlugin:
           args = this._commonsChunkPluginSerialize(plugin);
           this._addImport('webpack.optimize', 'CommonsChunkPlugin');
@@ -212,6 +225,9 @@ class JsonWebpackSerializer {
         case licensePlugin:
           args = this._licenseWebpackPlugin(plugin);
           this.variableImports['license-webpack-plugin'] = 'licensePlugin';
+        case ConcatPlugin:
+          args = this._concatPlugin(plugin);
+          this.variableImports['webpack-concat-plugin'] = 'ConcatPlugin';
         default:
           if (plugin.constructor.name == 'AngularServiceWorkerPlugin') {
             this._addImport('@angular/service-worker/build/webpack', plugin.constructor.name);
@@ -515,13 +531,13 @@ export default Task.extend({
           'postcss-url',
           'raw-loader',
           'sass-loader',
-          'script-loader',
           'source-map-loader',
           'istanbul-instrumenter-loader',
           'style-loader',
           'stylus-loader',
           'url-loader',
           'circular-dependency-plugin',
+          'webpack-concat-plugin',
         ].forEach((packageName: string) => {
           packageJson['devDependencies'][packageName] = ourPackageJson['dependencies'][packageName];
         });

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

@@ -1,7 +1,7 @@
 import { ExtraEntry, extraEntryParser } from '../models/webpack-configs/utils';
 
 // Sort chunks according to a predefined order:
-// inline, polyfills, all scripts, all styles, vendor, main
+// inline, polyfills, all styles, vendor, main
 export function packageChunkSort(appConfig: any) {
   let entryPoints = ['inline', 'polyfills', 'sw-register'];
 
@@ -11,10 +11,6 @@ export function packageChunkSort(appConfig: any) {
     }
   };
 
-  if (appConfig.scripts) {
-    extraEntryParser(appConfig.scripts, './', 'scripts').forEach(pushExtraEntries);
-  }
-
   if (appConfig.styles) {
     extraEntryParser(appConfig.styles, './', 'styles').forEach(pushExtraEntries);
   }

packages/@angular/cli/utilities/package-chunk-sort.ts

@@ -1,21 +1,20 @@
 import {
   writeMultipleFiles,
   expectFileToMatch,
-  appendToFile
+  appendToFile,
+  expectFileMatchToExist
 } from '../../utils/fs';
 import { ng } from '../../utils/process';
 import { updateJsonFile } from '../../utils/project';
 import { oneLineTrim } from 'common-tags';
 
 export default function () {
   return writeMultipleFiles({
-    'src/string-script.js': 'console.log(\'string-script\');',
+    'src/string-script.js': 'console.log(\'string-script\'); var number = 1+1;',
     'src/input-script.js': 'console.log(\'input-script\');',
     'src/lazy-script.js': 'console.log(\'lazy-script\');',
     'src/pre-rename-script.js': 'console.log(\'pre-rename-script\');',
-    'src/pre-rename-lazy-script.js': 'console.log(\'pre-rename-lazy-script\');',
-    'src/common-entry-script.js': 'console.log(\'common-entry-script\');',
-    'src/common-entry-style.css': '.common-entry-style { color: red }',
+    'src/pre-rename-lazy-script.js': 'console.log(\'pre-rename-lazy-script\');'
   })
     .then(() => appendToFile('src/main.ts', 'import \'./string-script.js\';'))
     .then(() => updateJsonFile('.angular-cli.json', configJson => {
@@ -25,10 +24,8 @@ export default function () {
         { input: 'input-script.js' },
         { input: 'lazy-script.js', lazy: true },
         { input: 'pre-rename-script.js', output: 'renamed-script' },
-        { input: 'pre-rename-lazy-script.js', output: 'renamed-lazy-script', lazy: true },
-        { input: 'common-entry-script.js', output: 'common-entry' }
+        { input: 'pre-rename-lazy-script.js', output: 'renamed-lazy-script', lazy: true }
       ];
-      app['styles'] = [{ input: 'common-entry-style.css', output: 'common-entry' }];
     }))
     .then(() => ng('build', '--extract-css'))
     // files were created successfully
@@ -37,21 +34,24 @@ export default function () {
     .then(() => expectFileToMatch('dist/lazy-script.bundle.js', 'lazy-script'))
     .then(() => expectFileToMatch('dist/renamed-script.bundle.js', 'pre-rename-script'))
     .then(() => expectFileToMatch('dist/renamed-lazy-script.bundle.js', 'pre-rename-lazy-script'))
-    .then(() => expectFileToMatch('dist/common-entry.bundle.js', 'common-entry-script'))
-    .then(() => expectFileToMatch('dist/common-entry.bundle.css', '.common-entry-style'))
     // index.html lists the right bundles
-    .then(() => expectFileToMatch('dist/index.html', oneLineTrim`
-      <link href="common-entry.bundle.css" rel="stylesheet"/>
-    `))
     .then(() => expectFileToMatch('dist/index.html', oneLineTrim`
       <script type="text/javascript" src="inline.bundle.js"></script>
       <script type="text/javascript" src="polyfills.bundle.js"></script>
       <script type="text/javascript" src="scripts.bundle.js"></script>
       <script type="text/javascript" src="renamed-script.bundle.js"></script>
-      <script type="text/javascript" src="common-entry.bundle.js"></script>
       <script type="text/javascript" src="vendor.bundle.js"></script>
       <script type="text/javascript" src="main.bundle.js"></script>
     `))
-     // ensure scripts aren't using script-loader when imported from the app
-    .then(() => expectFileToMatch('dist/main.bundle.js', 'console.log(\'string-script\');'));
+    // Ensure scripts can be separately imported from the app.
+    .then(() => expectFileToMatch('dist/main.bundle.js', 'console.log(\'string-script\');'))
+    // Verify uglify, sourcemaps and hashes. Lazy scripts should not get hashes.
+    .then(() => ng('build', '--prod', '--sourcemap'))
+    .then(() => expectFileMatchToExist('dist', /scripts\.[0-9a-f]{20}\.bundle\.js/))
+    .then(fileName => expectFileToMatch(`dist/${fileName}`, 'var number=2;'))
+    .then(() => expectFileMatchToExist('dist', /scripts\.[0-9a-f]{20}\.bundle\.js\.map/))
+    .then(() => expectFileMatchToExist('dist', /renamed-script\.[0-9a-f]{20}\.bundle\.js/))
+    .then(() => expectFileMatchToExist('dist', /renamed-script\.[0-9a-f]{20}\.bundle\.js.map/))
+    .then(() => expectFileToMatch('dist/lazy-script.bundle.js', 'lazy-script'))
+    .then(() => expectFileToMatch('dist/renamed-lazy-script.bundle.js', 'pre-rename-lazy-script'));
 }