refactor: webpack vendor, postcss + fixes

.babelrc

@@ -1,20 +1,7 @@
 {
   "comments": true,
   "presets": [
-    ["env", {
+    ["env"],
-      "targets": {
-        "browsers": [
-          "last 6 Chrome major versions",
-          "last 6 Firefox major versions",
-          "last 4 Safari major versions",
-          "last 4 Edge major versions",
-          "last 3 iOS major versions",
-          "last 3 Android major versions",
-          "last 2 ChromeAndroid major versions",
-          "Explorer 11"
-        ]
-      }
-    }],
     "stage-2"
   ]
 }

dev/webpack/postcss.config.js

@@ -1,2 +1,12 @@
 module.exports = {
+  plugins: {
+    'autoprefixer': {},
+    'cssnano': {
+      preset: ['default', {
+        discardComments: {
+          removeAll: true
+        }
+      }]
+    }
+  }
 }

dev/webpack/webpack.common.js

@@ -7,9 +7,16 @@ const ProgressBarPlugin = require('progress-bar-webpack-plugin')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 
 const babelConfig = fs.readJsonSync(path.join(process.cwd(), '.babelrc'))
+const postCSSConfig = {
+  config: {
+    path: path.join(process.cwd(), 'dev/webpack/postcss.config.js')
+  }
+}
 
 module.exports = {
-  entry: './client/index.js',
+  entry: {
+    client: './client/index.js'
+  },
   output: {
     path: path.join(process.cwd(), 'assets'),
     pathinfo: true,
@@ -45,12 +52,11 @@ module.exports = {
             loader: 'style-loader'
           },
           {
-            loader: 'css-loader',
+            loader: 'css-loader'
-            options: {
+          },
-              autoprefixer: false,
+          {
-              sourceMap: false,
+            loader: 'postcss-loader',
-              minimize: true
+            options: postCSSConfig
-            }
           }
         ]
       },
@@ -60,12 +66,11 @@ module.exports = {
           fallback: 'style-loader',
           use: [
             {
-              loader: 'css-loader',
+              loader: 'css-loader'
-              options: {
+            },
-                autoprefixer: false,
+            {
-                sourceMap: false,
+              loader: 'postcss-loader',
-                minimize: true
+              options: postCSSConfig
-              }
             },
             {
               loader: 'sass-loader',
@@ -80,18 +85,18 @@ module.exports = {
         test: /\.vue$/,
         loader: 'vue-loader',
         options: {
+          extractCSS: true,
           loaders: {
             css: [
               {
                 loader: 'vue-style-loader'
               },
               {
-                loader: 'css-loader',
+                loader: 'css-loader'
-                options: {
+              },
-                  autoprefixer: false,
+              {
-                  sourceMap: false,
+                loader: 'postcss-loader',
-                  minimize: true
+                options: postCSSConfig
-                }
               }
             ],
             scss: [
@@ -99,12 +104,11 @@ module.exports = {
                 loader: 'vue-style-loader'
               },
               {
-                loader: 'css-loader',
+                loader: 'css-loader'
-                options: {
+              },
-                  autoprefixer: false,
+              {
-                  sourceMap: false,
+                loader: 'postcss-loader',
-                  minimize: true
+                options: postCSSConfig
-                }
               },
               {
                 loader: 'sass-loader',
@@ -119,13 +123,21 @@ module.exports = {
                 }
               }
             ],
-            js: {
+            js: [
-              loader: 'babel-loader',
+              {
-              options: {
+                loader: 'cache-loader',
-                babelrc: path.join(process.cwd(), '.babelrc'),
+                options: {
-                cacheDirectory: true
+                  cacheDirectory: '.webpack-cache'
+                }
+              },
+              {
+                loader: 'babel-loader',
+                options: {
+                  babelrc: path.join(process.cwd(), '.babelrc'),
+                  cacheDirectory: true
+                }
               }
-            }
+            ]
           }
         }
       },
@@ -180,7 +192,16 @@ module.exports = {
     ], {
 
     }),
-    new ExtractTextPlugin('css/bundle.css')
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks(module) {
+        return module.context && module.context.includes('node_modules')
+      }
+    }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      minChunks: Infinity
+    })
   ],
   resolve: {
     symlinks: true,

dev/webpack/webpack.dev.js

@@ -1,6 +1,8 @@
 const webpack = require('webpack')
 const merge = require('webpack-merge')
 
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+
 const common = require('./webpack.common.js')
 
 module.exports = merge(common, {
@@ -10,7 +12,8 @@ module.exports = merge(common, {
   plugins: [
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('development')
-    })
+    }),
+    new ExtractTextPlugin({ disable: true })
   ],
   resolve: {}
 })

dev/webpack/webpack.prod.js

@@ -3,6 +3,7 @@ const merge = require('webpack-merge')
 
 const CleanWebpackPlugin = require('clean-webpack-plugin')
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
 
 const common = require('./webpack.common.js')
 
@@ -17,6 +18,7 @@ module.exports = merge(common, {
     new UglifyJSPlugin(),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production')
-    })
+    }),
+    new ExtractTextPlugin('css/bundle.css')
   ]
 })

package.json

@@ -9,9 +9,8 @@
     "restart": "node wiki restart",
     "build": "webpack --config dev/webpack/webpack.prod.js",
     "build:analyze": "poi build --analyze",
-    "dev:client": "poi watch",
+    "dev:client": "webpack --config dev/webpack/webpack.dev.js",
     "dev:server": "nodemon",
-    "dev:server:alt": "node-dev server --no-deps --respawn --no-notify",
     "test": "eslint --ext .js,.vue . && jest"
   },
   "bin": {
@@ -157,6 +156,7 @@
     "consolidate": "0.15.0",
     "copy-webpack-plugin": "4.3.1",
     "css-loader": "0.28.9",
+    "cssnano": "4.0.0-rc.2",
     "eslint": "4.13.1",
     "eslint-config-requarks": "1.0.7",
     "eslint-config-standard": "11.0.0-beta.0",
@@ -176,6 +176,7 @@
     "node-dev": "3.1.3",
     "node-sass": "4.7.2",
     "nodemon": "1.14.3",
+    "postcss-loader": "2.0.10",
     "postcss-selector-parser": "3.1.1",
     "progress-bar-webpack-plugin": "1.10.0",
     "pug-lint": "2.5.0",
@@ -206,6 +207,12 @@
     "webpack-merge": "4.1.1",
     "whatwg-fetch": "2.0.3"
   },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "Firefox ESR",
+    "not ie < 11"
+  ],
   "jest": {
     "testResultsProcessor": "./node_modules/jest-junit",
     "collectCoverage": false,

server/views/master.pug

@@ -21,7 +21,10 @@ html
     script.
       var siteConfig = !{JSON.stringify(config.site)}
 
-    //- JS / CSS
+    //- CSS
+    link(type='text/css', rel='stylesheet', href=config.site.path + 'css/bundle.css')
+
+    //- JS
     script(type='text/javascript', src=config.site.path + 'js/manifest.js')
     script(type='text/javascript', src=config.site.path + 'js/vendor.js')
     script(type='text/javascript', src=config.site.path + 'js/client.js')