Add '-loader' suffix to all Webpack loader references

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 } }
         ]
     }
 };

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: {

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' }
         ]
     },

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: {

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.

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) => {

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: [

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: {

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) },

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: {

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: [

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: {

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: {

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: {