Minimize CSS in production builds (all templates)

etimesg · SteveSandersonMS · commit ea429cccf40a · 2017-04-11T14:51:31.000+01:00
diff --git a/templates/Angular2Spa/webpack.config.js b/templates/Angular2Spa/webpack.config.js
@@ -18,7 +18,7 @@ module.exports = (env) => {
             rules: [
                 { test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
                 { test: /\.html$/, use: 'html-loader?minimize=false' },
-                { test: /\.css$/, use: ['to-string-loader', 'css-loader'] },
+                { test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
                 { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
             ]
         },
diff --git a/templates/Angular2Spa/webpack.config.vendor.js b/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({ use: 'css-loader' }) }
+                { test: /\.css(\?|$)/, use: extractCSS.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) }
             ]
         },
         plugins: [
@@ -73,7 +73,7 @@ module.exports = (env) => {
             libraryTarget: 'commonjs2',
         },
         module: {
-            rules: [ { test: /\.css(\?|$)/, use: ['to-string-loader', 'css-loader'] } ]
+            rules: [ { test: /\.css(\?|$)/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] } ]
         },
         entry: { vendor: ['aspnet-prerendering'] },
         plugins: [
diff --git a/templates/AureliaSpa/webpack.config.js b/templates/AureliaSpa/webpack.config.js
@@ -16,7 +16,7 @@ module.exports = {
         loaders: [
             { test: /\.ts$/, include: /ClientApp/, loader: 'ts-loader', query: { silent: true } },
             { test: /\.html$/, loader: 'html-loader' },
-            { test: /\.css$/, loaders: [ 'style-loader', 'css-loader' ] },
+            { test: /\.css$/, loaders: [ 'style-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
             { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
             { test: /\.json$/, loader: 'json-loader' }
         ]
diff --git 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-loader']) }
+            { test: /\.css(\?|$)/, loader: extractCSS.extract([ isDevBuild ? 'css-loader' : 'css-loader?minimize' ]) }
         ]
     },
     entry: {
diff --git a/templates/KnockoutSpa/webpack.config.js b/templates/KnockoutSpa/webpack.config.js
@@ -19,7 +19,7 @@ module.exports = (env) => {
             rules: [
                 { test: /\.ts$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
                 { test: /\.html$/, use: 'raw-loader' },
-                { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader' }) },
+                { test: /\.css$/, use: isDevBuild ? [ 'style-loader', 'css-loader' ] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
                 { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
             ]
         },
diff --git a/templates/KnockoutSpa/webpack.config.vendor.js b/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({ use: 'css-loader' }) }
+                { test: /\.css(\?|$)/, use: extractCSS.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) }
             ]
         },
         entry: {
diff --git a/templates/ReactReduxSpa/webpack.config.js b/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({ use: 'css-loader' }) },
+                { test: /\.css$/, use: ExtractTextPlugin.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) },
                 { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
             ]
         },
diff --git a/templates/ReactReduxSpa/webpack.config.vendor.js b/templates/ReactReduxSpa/webpack.config.vendor.js
@@ -49,7 +49,7 @@ module.exports = (env) => {
         output: { path: path.join(__dirname, 'wwwroot', 'dist') },
         module: {
             rules: [
-                { test: /\.css(\?|$)/, use: extractCSS.extract({ use: 'css-loader' }) }
+                { test: /\.css(\?|$)/, use: extractCSS.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) }
             ]
         },
         plugins: [
@@ -71,7 +71,7 @@ module.exports = (env) => {
             libraryTarget: 'commonjs2',
         },
         module: {
-            rules: [ { test: /\.css(\?|$)/, use: 'css-loader' } ]
+            rules: [ { test: /\.css(\?|$)/, use: isDevBuild ? 'css-loader' : 'css-loader?minimize' } ]
         },
         entry: { vendor: ['aspnet-prerendering', 'react-dom/server'] },
         plugins: [
diff --git a/templates/ReactSpa/webpack.config.js b/templates/ReactSpa/webpack.config.js
@@ -19,7 +19,7 @@ module.exports = (env) => {
             rules: [
                 { test: /\.ts(x?)$/, include: /ClientApp/, use: { loader: 'babel-loader', options: { cacheDirectory: true } } },
                 { test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
-                { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader' }) },
+                { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
                 { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
             ]
         },
diff --git a/templates/ReactSpa/webpack.config.vendor.js b/templates/ReactSpa/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(['css-loader']) }
+                { test: /\.css(\?|$)/, use: extractCSS.extract([ isDevBuild ? 'css-loader' : 'css-loader?minimize' ]) }
             ]
         },
         entry: {
diff --git a/templates/VueSpa/webpack.config.js b/templates/VueSpa/webpack.config.js
@@ -17,7 +17,7 @@ module.exports = (env) => {
             rules: [
                 { test: /\.vue\.html$/, include: /ClientApp/, loader: 'vue-loader', options: { loaders: { js: 'awesome-typescript-loader?silent=true' } } },
                 { test: /\.ts$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
-                { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader' }) },
+                { test: /\.css$/, use: isDevBuild ? [ 'style-loader', 'css-loader' ] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
                 { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
             ]
         },
diff --git a/templates/VueSpa/webpack.config.vendor.js b/templates/VueSpa/webpack.config.vendor.js
@@ -22,7 +22,7 @@ module.exports = (env) => {
         },
         module: {
             rules: [
-                { test: /\.css(\?|$)/, use: extractCSS.extract({ use: 'css-loader' }) },
+                { test: /\.css(\?|$)/, use: extractCSS.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) },
                 { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }
             ]
         },
diff --git 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-loader']) }
+            { test: /\.css/, loader: extractCSS.extract([ isDevelopment ? 'css-loader' : 'css-loader?minimize' ]) }
         ]
     },
     entry: {
diff --git 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-loader']) }
+            { test: /\.css/, loader: extractCSS.extract([ isDevelopment ? 'css-loader' : 'css-loader?minimize' ]) }
         ]
     },
     entry: {

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ module.exports = (env) => {`
`18`	`18`	`rules: [`
`19`	`19`	`{ test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },`
`20`	`20`	`{ test: /\.html$/, use: 'html-loader?minimize=false' },`
`21`		`- { test: /\.css$/, use: ['to-string-loader', 'css-loader'] },`
	`21`	`+ { test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },`
`22`	`22`	`{ test: /\.(png\|jpg\|jpeg\|gif\|svg)$/, use: 'url-loader?limit=25000' }`
`23`	`23`	`]`
`24`	`24`	`},`
Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ module.exports = {`
`16`	`16`	`loaders: [`
`17`	`17`	`{ test: /\.ts$/, include: /ClientApp/, loader: 'ts-loader', query: { silent: true } },`
`18`	`18`	`{ test: /\.html$/, loader: 'html-loader' },`
`19`		`- { test: /\.css$/, loaders: [ 'style-loader', 'css-loader' ] },`
	`19`	`+ { test: /\.css$/, loaders: [ 'style-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },`
`20`	`20`	`{ test: /\.(png\|woff\|woff2\|eot\|ttf\|svg)$/, loader: 'url-loader?limit=100000' },`
`21`	`21`	`{ test: /\.json$/, loader: 'json-loader' }`
`22`	`22`	`]`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ module.exports = {`
`11`	`11`	`module: {`
`12`	`12`	`loaders: [`
`13`	`13`	`{ test: /\.(png\|woff\|woff2\|eot\|ttf\|svg)(\?\|$)/, loader: 'url-loader?limit=100000' },`
`14`		`- { test: /\.css(\?\|$)/, loader: extractCSS.extract(['css-loader']) }`
	`14`	`+ { test: /\.css(\?\|$)/, loader: extractCSS.extract([ isDevBuild ? 'css-loader' : 'css-loader?minimize' ]) }`
`15`	`15`	`]`
`16`	`16`	`},`
`17`	`17`	`entry: {`
Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@ module.exports = (env) => {`
`19`	`19`	`rules: [`
`20`	`20`	`{ test: /\.ts$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },`
`21`	`21`	`{ test: /\.html$/, use: 'raw-loader' },`
`22`		`- { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader' }) },`
	`22`	`+ { test: /\.css$/, use: isDevBuild ? [ 'style-loader', 'css-loader' ] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },`
`23`	`23`	`{ test: /\.(png\|jpg\|jpeg\|gif\|svg)$/, use: 'url-loader?limit=25000' }`
`24`	`24`	`]`
`25`	`25`	`},`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@ module.exports = (env) => {`
`13`	`13`	`module: {`
`14`	`14`	`rules: [`
`15`	`15`	`{ test: /\.(png\|woff\|woff2\|eot\|ttf\|svg)(\?\|$)/, use: 'url-loader?limit=100000' },`
`16`		`- { test: /\.css(\?\|$)/, use: extractCSS.extract({ use: 'css-loader' }) }`
	`16`	`+ { test: /\.css(\?\|$)/, use: extractCSS.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) }`
`17`	`17`	`]`
`18`	`18`	`},`
`19`	`19`	`entry: {`
Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@ module.exports = (env) => {`
`30`	`30`	`entry: { 'main-client': './ClientApp/boot-client.tsx' },`
`31`	`31`	`module: {`
`32`	`32`	`rules: [`
`33`		`- { test: /\.css$/, use: ExtractTextPlugin.extract({ use: 'css-loader' }) },`
	`33`	`+ { test: /\.css$/, use: ExtractTextPlugin.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) },`
`34`	`34`	`{ test: /\.(png\|jpg\|jpeg\|gif\|svg)$/, use: 'url-loader?limit=25000' }`
`35`	`35`	`]`
`36`	`36`	`},`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ module.exports = (env) => {`
`17`	`17`	`rules: [`
`18`	`18`	`{ test: /\.vue\.html$/, include: /ClientApp/, loader: 'vue-loader', options: { loaders: { js: 'awesome-typescript-loader?silent=true' } } },`
`19`	`19`	`{ test: /\.ts$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },`
`20`		`- { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader' }) },`
	`20`	`+ { test: /\.css$/, use: isDevBuild ? [ 'style-loader', 'css-loader' ] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },`
`21`	`21`	`{ test: /\.(png\|jpg\|jpeg\|gif\|svg)$/, use: 'url-loader?limit=25000' }`
`22`	`22`	`]`
`23`	`23`	`},`
Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ module.exports = (env) => {`
`22`	`22`	`},`
`23`	`23`	`module: {`
`24`	`24`	`rules: [`
`25`		`- { test: /\.css(\?\|$)/, use: extractCSS.extract({ use: 'css-loader' }) },`
	`25`	`+ { test: /\.css(\?\|$)/, use: extractCSS.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) },`
`26`	`26`	`{ test: /\.(png\|woff\|woff2\|eot\|ttf\|svg)(\?\|$)/, use: 'url-loader?limit=100000' }`
`27`	`27`	`]`
`28`	`28`	`},`
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ module.exports = merge({`
`14`	`14`	`module: {`
`15`	`15`	`loaders: [`
`16`	`16`	`{ test: /\.ts(x?)$/, include: /ClientApp/, loader: 'ts-loader?silent=true' },`
`17`		`- { test: /\.css/, loader: extractCSS.extract(['css-loader']) }`
	`17`	`+ { test: /\.css/, loader: extractCSS.extract([ isDevelopment ? 'css-loader' : 'css-loader?minimize' ]) }`
`18`	`18`	`]`
`19`	`19`	`},`
`20`	`20`	`entry: {`