Add '-loader' suffix to all Webpack loader references

Author: scottaddie

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

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

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

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