diff --git a/samples/misc/Webpack/webpack.config.dev.js b/samples/misc/Webpack/webpack.config.dev.js
index 08e05f4bd7..fc339d2e6e 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 5dbe0c8f4a..08923f39ac 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 94fe943dc4..5afc9a6b17 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 ea404663c9..69bdc2f44e 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 89371baf69..bd37fb7261 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 dafa58b267..dc3bdf69dd 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 e6051cb104..26758ebdea 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 011a220251..af9062c3ad 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 10f13e8ffb..d429bbb5b5 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 98fd96d0c5..109a1197b3 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 049bc837fc..c6902cb017 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 9398d50a18..a89d8ff0f5 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 caad44b4db..3c0f24d969 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 54d81727cd..3fa474c707 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 c3421e8bbe..854a2ca3b1 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 129d22ce47..712ab40700 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 c6161de50b..546fd2335a 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: {