diff --git a/samples/misc/Webpack/webpack.config.dev.js b/samples/misc/Webpack/webpack.config.dev.js
index 08e05f4..fc339d2 100644
--- a/samples/misc/Webpack/webpack.config.dev.js
+++ b/samples/misc/Webpack/webpack.config.dev.js
@@ -2,7 +2,7 @@ module.exports = {
     devtool: 'inline-source-map',
     module: {
         loaders: [
-            { test: /\.less$/, loader: 'style!css!less' }
+            { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }
         ]
     }
 };
diff --git a/samples/misc/Webpack/webpack.config.prod.js b/samples/misc/Webpack/webpack.config.prod.js
index 5dbe0c8..08923f3 100644
--- a/samples/misc/Webpack/webpack.config.prod.js
+++ b/samples/misc/Webpack/webpack.config.prod.js
@@ -5,7 +5,7 @@ var extractLESS = new ExtractTextPlugin('my-styles.css');
 module.exports = {
     module: {
         loaders: [
-            { test: /\.less$/, loader: extractLESS.extract(['css', 'less']) },
+            { test: /\.less$/, loader: extractLESS.extract(['css-loader', 'less-loader']) },
         ]
     },
     plugins: [
diff --git a/src/Microsoft.AspNetCore.SpaServices/README.md b/src/Microsoft.AspNetCore.SpaServices/README.md
index 94fe943..5afc9a6 100644
--- a/src/Microsoft.AspNetCore.SpaServices/README.md
+++ b/src/Microsoft.AspNetCore.SpaServices/README.md
@@ -391,7 +391,7 @@ To make this work, the template has Webpack configured to inject the contents of
 
 ```javascript
 // This goes into webpack.config.js, in the module loaders array:
-{ test: /\.css/, include: /ClientApp/, loader: 'raw' }
+{ test: /\.css/, include: /ClientApp/, loader: 'raw-loader' }
 ```
 
 Now if you want to use LESS instead of plain CSS, you just need to include a LESS loader. Run the following in a command prompt at your project root:
@@ -403,10 +403,10 @@ npm install --save less-loader less
 Next, add the following loader configuration to the `loaders` array in `webpack.config.js`:
 
 ```javascript
-{ test: /\.less/, include: /ClientApp/, loader: 'raw!less' }
+{ test: /\.less/, include: /ClientApp/, loader: 'raw-loader!less-loader' }
 ```
 
-Notice how this chains together the `less` loader (which transforms `.less` syntax to plain CSS syntax), then the `raw` loader (which turn the result into a string literal). With this in place, you can reference `.less` files from your Angular 2 components in the obvious way:
+Notice how this chains together with `less-loader` (which transforms `.less` syntax to plain CSS syntax), then the `raw` loader (which turn the result into a string literal). With this in place, you can reference `.less` files from your Angular 2 components in the obvious way:
 
 ```javascript
 @Component({
@@ -447,7 +447,7 @@ npm install --save less-loader less
 Finally, tell Webpack to use this whenever it encounters a `.less` file. In `webpack.config.js`, add to the `loaders` array:
 
 ```
-{ test: /\.less/, loader: 'style!css!less' }
+{ test: /\.less/, loader: 'style-loader!css-loader!less-loader' }
 ```
 
 This means that when you `import` or `require` a `.less` file, it should pass it first to the LESS compiler to produce CSS, then the output goes to the CSS and Style loaders that know how to attach it dynamically to the page at runtime.
@@ -489,7 +489,7 @@ var extractStyles = new (require('extract-text-webpack-plugin'))('mystyles.css')
 This creates a plugin instance that will output text to a file called `mystyles.css`. You can now compile `.less` files and emit the resulting CSS text into that file. To do so, add the following to the `loaders` array in your Webpack configuration:
 
 ```javascript
-{ test: /\.less$/, loader: extractStyles.extract('css!less') }
+{ test: /\.less$/, loader: extractStyles.extract('css-loader!less-loader') }
 ```
 
 This tells Webpack that, whenever it finds a `.less` file, it should use the LESS loader to produce CSS, and then feed that CSS into the `extractStyles` object which you've already configured to write a file on disk called `mystyles.css`. Finally, for this to actually work, you need to include `extractStyles` in the list of active plugins. Just add that object to the `plugins` array in your Webpack config, e.g.:
diff --git a/templates/Angular2Spa/webpack.config.js b/templates/Angular2Spa/webpack.config.js
index ea40466..69bdc2f 100644
--- a/templates/Angular2Spa/webpack.config.js
+++ b/templates/Angular2Spa/webpack.config.js
@@ -15,10 +15,10 @@ var sharedConfig = {
     },
     module: {
         loaders: [
-            { test: /\.ts$/, include: /ClientApp/, loaders: ['ts?silent=true', 'angular2-template'] },
-            { test: /\.html$/, loader: 'html' },
-            { test: /\.css$/, loader: 'to-string!css' },
-            { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } }
+            { test: /\.ts$/, include: /ClientApp/, loaders: ['ts-loader?silent=true', 'angular2-template-loader'] },
+            { test: /\.html$/, loader: 'html-loader' },
+            { test: /\.css$/, loader: 'to-string-loader!css-loader' },
+            { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url-loader', query: { limit: 25000 } }
         ]
     }
 };
diff --git a/templates/Angular2Spa/webpack.config.vendor.js b/templates/Angular2Spa/webpack.config.vendor.js
index 89371ba..bd37fb7 100644
--- a/templates/Angular2Spa/webpack.config.vendor.js
+++ b/templates/Angular2Spa/webpack.config.vendor.js
@@ -11,7 +11,7 @@ module.exports = {
     module: {
         loaders: [
             { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
-            { test: /\.css(\?|$)/, loader: extractCSS.extract(['css']) }
+            { test: /\.css(\?|$)/, loader: extractCSS.extract(['css-loader']) }
         ]
     },
     entry: {
diff --git a/templates/AureliaSpa/webpack.config.js b/templates/AureliaSpa/webpack.config.js
index dafa58b..dc3bdf6 100644
--- a/templates/AureliaSpa/webpack.config.js
+++ b/templates/AureliaSpa/webpack.config.js
@@ -14,9 +14,9 @@ module.exports = {
     },
     module: {
         loaders: [
-            { test: /\.ts$/, include: /ClientApp/, loader: 'ts', query: { silent: true } },
-            { test: /\.html$/, loader: 'html' },
-            { test: /\.css$/, loaders: [ 'style', 'css' ] },
+            { test: /\.ts$/, include: /ClientApp/, loader: 'ts-loader', query: { silent: true } },
+            { test: /\.html$/, loader: 'html-loader' },
+            { test: /\.css$/, loaders: [ 'style-loader', 'css-loader' ] },
             { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
         ]
     },
diff --git a/templates/AureliaSpa/webpack.config.vendor.js b/templates/AureliaSpa/webpack.config.vendor.js
index e6051cb..26758eb 100644
--- a/templates/AureliaSpa/webpack.config.vendor.js
+++ b/templates/AureliaSpa/webpack.config.vendor.js
@@ -11,7 +11,7 @@ module.exports = {
     module: {
         loaders: [
             { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
-            { test: /\.css(\?|$)/, loader: extractCSS.extract(['css']) }
+            { test: /\.css(\?|$)/, loader: extractCSS.extract(['css-loader']) }
         ]
     },
     entry: {
diff --git a/templates/KnockoutSpa/ClientApp/components/app-root/app-root.ts b/templates/KnockoutSpa/ClientApp/components/app-root/app-root.ts
index 011a220..af9062c 100644
--- a/templates/KnockoutSpa/ClientApp/components/app-root/app-root.ts
+++ b/templates/KnockoutSpa/ClientApp/components/app-root/app-root.ts
@@ -20,13 +20,13 @@ class AppRootViewModel {
         this.route = this._router.currentRoute;
 
         // Load and register all the KO components needed to handle the routes
-        // The optional 'bundle?lazy!' prefix is a Webpack feature that causes the referenced modules
+        // The optional 'bundle-loader?lazy!' prefix is a Webpack feature that causes the referenced modules
         // to be split into separate files that are then loaded on demand.
         // For docs, see https://github.com/webpack/bundle-loader
         ko.components.register('nav-menu', navMenu);
-        ko.components.register('home-page', require('bundle?lazy!../home-page/home-page'));
-        ko.components.register('counter-example', require('bundle?lazy!../counter-example/counter-example'));
-        ko.components.register('fetch-data', require('bundle?lazy!../fetch-data/fetch-data'));
+        ko.components.register('home-page', require('bundle-loader?lazy!../home-page/home-page'));
+        ko.components.register('counter-example', require('bundle-loader?lazy!../counter-example/counter-example'));
+        ko.components.register('fetch-data', require('bundle-loader?lazy!../fetch-data/fetch-data'));
     }
 
     // To support hot module replacement, this method unregisters the router and KO components.
diff --git a/templates/KnockoutSpa/ClientApp/webpack-component-loader.ts b/templates/KnockoutSpa/ClientApp/webpack-component-loader.ts
index 10f13e8..d429bbb 100644
--- a/templates/KnockoutSpa/ClientApp/webpack-component-loader.ts
+++ b/templates/KnockoutSpa/ClientApp/webpack-component-loader.ts
@@ -2,7 +2,7 @@ import * as ko from 'knockout';
 
 // This Knockout component loader integrates with Webpack's lazy-loaded bundle feature.
 // Having this means you can optionally declare components as follows:
-//   ko.components.register('my-component', require('bundle?lazy!../some-path-to-a-js-or-ts-module'));
+//   ko.components.register('my-component', require('bundle-loader?lazy!../some-path-to-a-js-or-ts-module'));
 // ... and then it will be loaded on demand instead of being loaded up front.
 ko.components.loaders.unshift({
     loadComponent: (name, componentConfig, callback) => {
diff --git a/templates/KnockoutSpa/webpack.config.js b/templates/KnockoutSpa/webpack.config.js
index 98fd96d..109a119 100644
--- a/templates/KnockoutSpa/webpack.config.js
+++ b/templates/KnockoutSpa/webpack.config.js
@@ -14,10 +14,10 @@ module.exports = {
     },
     module: {
         loaders: [
-            { test: /\.ts$/, include: /ClientApp/, loader: 'ts', query: { silent: true } },
-            { test: /\.html$/, loader: 'raw' },
-            { test: /\.css$/, loader: isDevBuild ? 'style!css' : ExtractTextPlugin.extract(['css']) },
-            { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } }
+            { test: /\.ts$/, include: /ClientApp/, loader: 'ts-loader', query: { silent: true } },
+            { test: /\.html$/, loader: 'raw-loader' },
+            { test: /\.css$/, loader: isDevBuild ? 'style-loader!css-loader' : ExtractTextPlugin.extract(['css-loader']) },
+            { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url-loader', query: { limit: 25000 } }
         ]
     },
     plugins: [
diff --git a/templates/KnockoutSpa/webpack.config.vendor.js b/templates/KnockoutSpa/webpack.config.vendor.js
index 049bc83..c6902cb 100644
--- a/templates/KnockoutSpa/webpack.config.vendor.js
+++ b/templates/KnockoutSpa/webpack.config.vendor.js
@@ -11,7 +11,7 @@ module.exports = {
     module: {
         loaders: [
             { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
-            { test: /\.css(\?|$)/, loader: extractCSS.extract(['css']) }
+            { test: /\.css(\?|$)/, loader: extractCSS.extract(['css-loader']) }
         ]
     },
     entry: {
diff --git a/templates/ReactReduxSpa/webpack.config.js b/templates/ReactReduxSpa/webpack.config.js
index 9398d50..a89d8ff 100644
--- a/templates/ReactReduxSpa/webpack.config.js
+++ b/templates/ReactReduxSpa/webpack.config.js
@@ -16,7 +16,7 @@ var sharedConfig = () => ({
     module: {
         loaders: [
             { test: /\.tsx?$/, include: /ClientApp/, loader: 'babel-loader' },
-            { test: /\.tsx?$/, include: /ClientApp/, loader: 'ts', query: { silent: true } }
+            { test: /\.tsx?$/, include: /ClientApp/, loader: 'ts-loader', query: { silent: true } }
         ]
     }
 });
@@ -27,8 +27,8 @@ var clientBundleConfig = merge(sharedConfig(), {
     entry: { 'main-client': './ClientApp/boot-client.tsx' },
     module: {
         loaders: [
-            { test: /\.css$/, loader: ExtractTextPlugin.extract(['css']) },
-            { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } }
+            { test: /\.css$/, loader: ExtractTextPlugin.extract(['css-loader']) },
+            { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url-loader', query: { limit: 25000 } }
         ]
     },
     output: { path: path.join(__dirname, clientBundleOutputDir) },
diff --git a/templates/ReactReduxSpa/webpack.config.vendor.js b/templates/ReactReduxSpa/webpack.config.vendor.js
index caad44b..3c0f24d 100644
--- a/templates/ReactReduxSpa/webpack.config.vendor.js
+++ b/templates/ReactReduxSpa/webpack.config.vendor.js
@@ -11,7 +11,7 @@ module.exports = {
     module: {
         loaders: [
             { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
-            { test: /\.css(\?|$)/, loader: extractCSS.extract(['css']) }
+            { test: /\.css(\?|$)/, loader: extractCSS.extract(['css-loader']) }
         ]
     },
     entry: {
diff --git a/templates/ReactSpa/webpack.config.js b/templates/ReactSpa/webpack.config.js
index 54d8172..3fa474c 100644
--- a/templates/ReactSpa/webpack.config.js
+++ b/templates/ReactSpa/webpack.config.js
@@ -16,9 +16,9 @@ module.exports = {
     module: {
         loaders: [
             { test: /\.ts(x?)$/, include: /ClientApp/, loader: 'babel-loader' },
-            { test: /\.tsx?$/, include: /ClientApp/, loader: 'ts', query: { silent: true } },
-            { test: /\.css$/, loader: isDevBuild ? 'style!css' : ExtractTextPlugin.extract(['css']) },
-            { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } }
+            { test: /\.tsx?$/, include: /ClientApp/, loader: 'ts-loader', query: { silent: true } },
+            { test: /\.css$/, loader: isDevBuild ? 'style-loader!css-loader' : ExtractTextPlugin.extract(['css-loader']) },
+            { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url-loader', query: { limit: 25000 } }
         ]
     },
     plugins: [
diff --git a/templates/ReactSpa/webpack.config.vendor.js b/templates/ReactSpa/webpack.config.vendor.js
index c3421e8..854a2ca 100644
--- a/templates/ReactSpa/webpack.config.vendor.js
+++ b/templates/ReactSpa/webpack.config.vendor.js
@@ -11,7 +11,7 @@ module.exports = {
     module: {
         loaders: [
             { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
-            { test: /\.css(\?|$)/, loader: extractCSS.extract(['css']) }
+            { test: /\.css(\?|$)/, loader: extractCSS.extract(['css-loader']) }
         ]
     },
     entry: {
diff --git a/templates/WebApplicationBasic/webpack.config.js b/templates/WebApplicationBasic/webpack.config.js
index 129d22c..712ab40 100644
--- a/templates/WebApplicationBasic/webpack.config.js
+++ b/templates/WebApplicationBasic/webpack.config.js
@@ -14,7 +14,7 @@ module.exports = merge({
     module: {
         loaders: [
             { test: /\.ts(x?)$/, include: /ClientApp/, loader: 'ts-loader?silent=true' },
-            { test: /\.css/, loader: extractCSS.extract(['css']) }
+            { test: /\.css/, loader: extractCSS.extract(['css-loader']) }
         ]
     },
     entry: {
diff --git a/templates/WebApplicationBasic/webpack.config.vendor.js b/templates/WebApplicationBasic/webpack.config.vendor.js
index c6161de..546fd23 100644
--- a/templates/WebApplicationBasic/webpack.config.vendor.js
+++ b/templates/WebApplicationBasic/webpack.config.vendor.js
@@ -11,7 +11,7 @@ module.exports = {
     module: {
         loaders: [
             { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
-            { test: /\.css/, loader: extractCSS.extract(['css']) }
+            { test: /\.css/, loader: extractCSS.extract(['css-loader']) }
         ]
     },
     entry: {