refactor(@angular/cli): add webpack integrated scripts plugin

Author: clydin

package-lock.json

@@ -95,7 +95,6 @@
     "uglifyjs-webpack-plugin": "~1.1.2",
     "url-loader": "^0.6.2",
     "webpack": "~3.10.0",
-    "webpack-concat-plugin": "^1.4.2",
     "webpack-dev-middleware": "~1.12.0",
     "webpack-dev-server": "~2.9.3",
     "webpack-merge": "^4.1.0",
@@ -116,13 +115,15 @@
     "@types/glob": "^5.0.29",
     "@types/jasmine": "2.5.45",
     "@types/lodash": "~4.14.50",
+    "@types/loader-utils": "^1.1.0",
     "@types/minimist": "^1.2.0",
     "@types/mock-fs": "^3.6.30",
     "@types/node": "^6.0.84",
     "@types/request": "~2.0.0",
     "@types/semver": "^5.3.30",
     "@types/source-map": "^0.5.0",
     "@types/webpack": "^3.0.5",
+    "@types/webpack-sources": "^0.1.3",
     "conventional-changelog": "1.1.0",
     "dtsgenerator": "^0.9.1",
     "eslint": "^3.11.0",

package.json

@@ -2,13 +2,12 @@ import * as webpack from 'webpack';
 import * as path from 'path';
 import * as CopyWebpackPlugin from 'copy-webpack-plugin';
 import { NamedLazyChunksWebpackPlugin } from '../../plugins/named-lazy-chunks-webpack-plugin';
-import { InsertConcatAssetsWebpackPlugin } from '../../plugins/insert-concat-assets-webpack-plugin';
 import { extraEntryParser, getOutputHashFormat, AssetPattern } from './utils';
 import { isDirectory } from '../../utilities/is-directory';
 import { requireProjectModule } from '../../utilities/require-project-module';
 import { WebpackConfigOptions } from '../webpack-config';
+import { ScriptsWebpackPlugin } from '../../plugins/scripts-webpack-plugin';
 
-const ConcatPlugin = require('webpack-concat-plugin');
 const ProgressPlugin = require('webpack/lib/ProgressPlugin');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 const SilentError = require('silent-error');
@@ -65,23 +64,16 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
 
     // 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,
+      // Lazy scripts don't get a hash, otherwise they can't be loaded by name.
+      const hash = script.lazy ? '' : hashFormat.script;
+      extraPlugins.push(new ScriptsWebpackPlugin({
         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
+        sourceMap: buildOptions.sourcemaps,
+        filename: `${script.entry}${hash}.bundle.js`,
+        scripts: script.paths,
+        basePath: projectRoot,
       }));
     });
-
-    // 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

@@ -81,8 +81,8 @@ export function getOutputHashFormat(option: string, length = 20): HashFormat {
   const hashFormats: { [option: string]: HashFormat } = {
     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]'  },
+    bundles: { chunk: `.[chunkhash:${length}]`, extract: `.[contenthash:${length}]`, file: ''                 , script: `.[hash:${length}]`  },
+    all:     { chunk: `.[chunkhash:${length}]`, extract: `.[contenthash:${length}]`, file: `.[hash:${length}]`, script: `.[hash:${length}]`  },
   };
   /* tslint:enable:max-line-length */
   return hashFormats[option] || hashFormats['none'];

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

@@ -53,6 +53,7 @@
     "less-loader": "^4.0.5",
     "license-webpack-plugin": "^1.0.0",
     "lodash": "^4.11.1",
+    "loader-utils": "1.1.0",
     "memory-fs": "^0.4.1",
     "minimatch": "^3.0.4",
     "node-modules-path": "^1.0.0",
@@ -77,7 +78,6 @@
     "uglifyjs-webpack-plugin": "~1.1.2",
     "url-loader": "^0.6.2",
     "webpack": "~3.10.0",
-    "webpack-concat-plugin": "^1.4.2",
     "webpack-dev-middleware": "~1.12.0",
     "webpack-dev-server": "~2.9.3",
     "webpack-merge": "^4.1.0",