feat: add css-with-mapping-loader to enable source mapping for component style

feat: add html-loader
feat: inline small SVG files referenced by HTML/CSS as dataURLs

Author: asnowwolf

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

@@ -124,11 +124,11 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
       rules: [
         { enforce: 'pre', test: /\.js$/, loader: 'source-map-loader', exclude: [nodeModules] },
         { test: /\.json$/, loader: 'json-loader' },
-        { test: /\.html$/, loader: 'raw-loader' },
-        { test: /\.(eot|svg)$/, loader: `file-loader?name=[name]${hashFormat.file}.[ext]` },
+        { test: /\.html$/, loaders: ['html-loader'] },
+        { test: /\.(eot|svg)$/, loader: `url-loader?name=images/[name]${hashFormat.file}.[ext]&limit=256` },
         {
           test: /\.(jpg|png|gif|otf|ttf|woff|woff2)$/,
-          loader: `url-loader?name=[name]${hashFormat.file}.[ext]&limit=10000`
+          loader: `url-loader?name=images/[name]${hashFormat.file}.[ext]&limit=10000`
         }
       ].concat(extraRules)
     },

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

@@ -36,7 +36,7 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
   // style-loader does not support sourcemaps without absolute publicPath, so it's
   // better to disable them when not extracting css
   // https://github.com/webpack-contrib/style-loader#recommended-configuration
-  const cssSourceMap = buildOptions.extractCss && buildOptions.sourcemap;
+  const cssSourceMap = buildOptions.sourcemap;
 
   // minify/optimize css in production
   // autoprefixer is always run separately so disable here
@@ -90,7 +90,12 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
 
   // load component css as raw strings
   let rules: any = baseRules.map(({test, loaders}) => ({
-    exclude: globalStylePaths, test, loaders: ['raw-loader', ...commonLoaders, ...loaders]
+    exclude: globalStylePaths, test, loaders: [
+      'css-with-mapping-loader',
+      `css-loader?${JSON.stringify({ sourceMap: cssSourceMap })}`,
+      ...commonLoaders,
+      ...loaders
+    ]
   }));
 
   // load global css as css files

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

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

packages/@angular/cli/package.json

@@ -37,6 +37,7 @@
     "chalk": "^1.1.3",
     "common-tags": "^1.3.1",
     "css-loader": "^0.26.1",
+    "css-with-mapping-loader": "0.0.5",
     "cssnano": "^3.10.0",
     "debug": "^2.1.3",
     "denodeify": "^1.2.1",
@@ -50,6 +51,7 @@
     "fs-extra": "^0.30.0",
     "get-caller-file": "^1.0.0",
     "glob": "^7.0.3",
+    "html-loader": "^0.4.4",
     "html-webpack-plugin": "^2.19.0",
     "inflection": "^1.7.0",
     "inquirer": "^0.12.0",