diff --git a/packages/@angular/cli/models/webpack-configs/common.ts b/packages/@angular/cli/models/webpack-configs/common.ts
index 7983a8dd4fef..789dd47c6ccf 100644
--- a/packages/@angular/cli/models/webpack-configs/common.ts
+++ b/packages/@angular/cli/models/webpack-configs/common.ts
@@ -63,8 +63,16 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
     extraPlugins.push(new ProgressPlugin({ profile: buildOptions.verbose, colors: true }));
   }
 
+  if (buildOptions.sourcemaps) {
+    extraPlugins.push(new webpack.SourceMapDevToolPlugin({
+      filename: '[file].map[query]',
+      moduleFilenameTemplate: '[resource-path]',
+      fallbackModuleFilenameTemplate: '[resource-path]?[hash]',
+      sourceRoot: 'webpack:///'
+    }));
+  }
+
   return {
-    devtool: buildOptions.sourcemaps ? 'source-map' : false,
     resolve: {
       extensions: ['.ts', '.js'],
       modules: ['node_modules', nodeModules],
diff --git a/packages/@angular/cli/tasks/eject.ts b/packages/@angular/cli/tasks/eject.ts
index c64c93aa61c6..c0ada498fe12 100644
--- a/packages/@angular/cli/tasks/eject.ts
+++ b/packages/@angular/cli/tasks/eject.ts
@@ -151,6 +151,9 @@ class JsonWebpackSerializer {
         case (<any>webpack).HashedModuleIdsPlugin:
           this._addImport('webpack', 'HashedModuleIdsPlugin');
           break;
+        case webpack.SourceMapDevToolPlugin:
+          this._addImport('webpack', 'SourceMapDevToolPlugin');
+          break;
         case webpack.optimize.UglifyJsPlugin:
           this._addImport('webpack.optimize', 'UglifyJsPlugin');
           break;