fix and optimize layout media queries after upgrade to webpack 2 vuematerial#456

Author: marcosmoura

build/webpack/prod-docs.js

@@ -6,6 +6,8 @@ import ExtractTextPlugin from 'extract-text-webpack-plugin';
 import CopyWebpackPlugin from 'copy-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import OptimizeJsPlugin from 'optimize-js-plugin';
+import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin';
+import mediaPacker from 'css-mqpacker';
 import config from '../config';
 import baseConfig from './base';
 
@@ -37,7 +39,8 @@ const conf = merge(baseConfig, {
           postcss: [
             autoprefixer({
               browsers: ['last 3 versions', 'not IE < 10']
-            })
+            }),
+            mediaPacker()
           ]
         }
       },
@@ -130,7 +133,8 @@ const conf = merge(baseConfig, {
     new webpack.optimize.CommonsChunkPlugin({
       name: 'manifest',
       chunks: ['vendor']
-    })
+    }),
+    new OptimizeCssAssetsPlugin()
   ]
 });
 

build/webpack/prod-lib.js

@@ -5,6 +5,8 @@ import merge from 'webpack-merge';
 import autoprefixer from 'autoprefixer';
 import ExtractTextPlugin from 'extract-text-webpack-plugin';
 import OptimizeJsPlugin from 'optimize-js-plugin';
+import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin';
+import mediaPacker from 'css-mqpacker';
 import config from '../config';
 import baseConfig from './base';
 
@@ -54,7 +56,8 @@ export default merge(baseConfig, {
           postcss: [
             autoprefixer({
               browsers: ['last 3 versions', 'not IE < 10']
-            })
+            }),
+            mediaPacker()
           ]
         }
       },
@@ -109,6 +112,7 @@ export default merge(baseConfig, {
       raw: true,
       entryOnly: true
     }),
-    new ExtractTextPlugin('[name].css')
+    new ExtractTextPlugin('[name].css'),
+    new OptimizeCssAssetsPlugin()
   ]
 });

package.json

@@ -61,6 +61,7 @@
     "connect-history-api-fallback": "^1.3.0",
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.26.1",
+    "css-mqpacker": "^5.0.1",
     "element.scrollintoviewifneeded-polyfill": "^1.0.1",
     "eslint": "^3.15.0",
     "eslint-friendly-formatter": "^2.0.7",
@@ -74,6 +75,7 @@
     "highlight.js": "^9.9.0",
     "html-webpack-plugin": "^2.28.0",
     "node-sass": "^4.5.0",
+    "optimize-css-assets-webpack-plugin": "^1.3.0",
     "optimize-js-plugin": "^0.0.4",
     "ora": "^1.1.0",
     "raw-loader": "^0.5.1",