Replace 'loader' with 'use' in various Webpack configs. Fixes 'loader option has been deprecated' warnings.

Author: SteveSandersonMS

templates/Angular2Spa/webpack.config.vendor.js

@@ -51,7 +51,7 @@ module.exports = (env) => {
         output: { path: path.join(__dirname, 'wwwroot', 'dist') },
         module: {
             rules: [
-                { test: /\.css(\?|$)/, use: extractCSS.extract({ loader: 'css-loader' }) }
+                { test: /\.css(\?|$)/, use: extractCSS.extract({ use: 'css-loader' }) }
             ]
         },
         plugins: [

templates/KnockoutSpa/webpack.config.js

@@ -18,9 +18,9 @@ module.exports = (env) => {
         module: {
             rules: [
                 { test: /\.ts$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
-                { test: /\.html$/, loader: 'raw-loader' },
-                { test: /\.css$/, loader: isDevBuild ? 'style-loader!css-loader' : ExtractTextPlugin.extract({ loader: 'css-loader' }) },
-                { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url-loader?limit=25000' }
+                { test: /\.html$/, use: 'raw-loader' },
+                { test: /\.css$/, use: isDevBuild ? 'style-loader!css-loader' : ExtractTextPlugin.extract({ use: 'css-loader' }) },
+                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
             ]
         },
         plugins: [

templates/KnockoutSpa/webpack.config.vendor.js

@@ -13,7 +13,7 @@ module.exports = (env) => {
         module: {
             rules: [
                 { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' },
-                { test: /\.css(\?|$)/, use: extractCSS.extract({ loader: 'css-loader' }) }
+                { test: /\.css(\?|$)/, use: extractCSS.extract({ use: 'css-loader' }) }
             ]
         },
         entry: {

templates/ReactReduxSpa/webpack.config.js

@@ -30,7 +30,7 @@ module.exports = (env) => {
         entry: { 'main-client': './ClientApp/boot-client.tsx' },
         module: {
             rules: [
-                { test: /\.css$/, use: ExtractTextPlugin.extract({ loader: 'css-loader' }) },
+                { test: /\.css$/, use: ExtractTextPlugin.extract({ use: 'css-loader' }) },
                 { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
             ]
         },

templates/ReactReduxSpa/webpack.config.vendor.js

@@ -50,7 +50,7 @@ module.exports = (env) => {
         output: { path: path.join(__dirname, 'wwwroot', 'dist') },
         module: {
             rules: [
-                { test: /\.css(\?|$)/, use: extractCSS.extract({ loader: 'css-loader' }) }
+                { test: /\.css(\?|$)/, use: extractCSS.extract({ use: 'css-loader' }) }
             ]
         },
         plugins: [

templates/ReactSpa/webpack.config.js

@@ -19,7 +19,7 @@ module.exports = (env) => {
             rules: [
                 { test: /\.ts(x?)$/, include: /ClientApp/, use: 'babel-loader' },
                 { test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
-                { test: /\.css$/, loader: isDevBuild ? 'style-loader!css-loader' : ExtractTextPlugin.extract({ loader: 'css-loader' }) },
+                { test: /\.css$/, use: isDevBuild ? 'style-loader!css-loader' : ExtractTextPlugin.extract({ use: 'css-loader' }) },
                 { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
             ]
         },