adjust build

webpack.client.config.js → build/webpack.base.config.js

 const path = require('path')
-const webpack = require('webpack')
-const isProd = process.env.NODE_ENV === 'production'
 
 module.exports = {
   devtool: '#source-map',
-  entry: './src/client-entry.js',
+  entry: {
+    app: './src/client-entry.js',
+    vendor: ['vue', 'vue-router', 'vuex', 'firebase', 'lru-cache']
+  },
   output: {
-    path: path.resolve(__dirname, './dist'),
+    path: path.resolve(__dirname, '../dist'),
     publicPath: '/dist/',
     filename: 'client-bundle.js'
   },
   resolveLoader: {
-    root: path.join(__dirname, 'node_modules'),
+    root: path.join(__dirname, '../node_modules'),
   },
   module: {
     loaders: [
@@ -32,37 +33,5 @@ module.exports = {
         }
       }
     ]
-  },
-  devServer: {
-    historyApiFallback: true,
-    noInfo: true
-  },
-  plugins: [
-    new webpack.optimize.OccurrenceOrderPlugin(),
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
-    })
-  ]
-}
-
-if (process.env.NODE_ENV === 'production' && process.env.VUE_ENV !== 'server') {
-  const ExtractTextPlugin = require('extract-text-webpack-plugin')
-
-  module.exports.vue = {
-    loaders: {
-      css: ExtractTextPlugin.extract({
-        loader: "css-loader",
-        fallbackLoader: "vue-style-loader"
-      })
-    }
-  }
-
-  module.exports.plugins = module.exports.plugins.concat([
-    new ExtractTextPlugin('styles.css'),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
   }
-    })
-  ])
 }

build/webpack.client.config.js

+const base = require('./webpack.base.config')
+const webpack = require('webpack')
+const isProd = process.env.NODE_ENV === 'production'
+
+const config = Object.assign({}, base, {
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
+    }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      filename: 'client-vendor-bundle.js'
+    })
+  ]
+})
+
+if (isProd) {
+  const ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+  config.vue = {
+    loaders: {
+      css: ExtractTextPlugin.extract({
+        loader: "css-loader",
+        fallbackLoader: "vue-style-loader"
+      })
+    }
+  }
+
+  config.plugins.push(
+    new ExtractTextPlugin('styles.css'),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true
+    }),
+    // minify
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      }
+    })
+  )
+}
+
+module.exports = config

webpack.server.config.js → build/webpack.server.config.js

 const webpack = require('webpack')
-const merge = require('webpack-merge')
-const webpackConfig = require('./webpack.client.config')
+const base = require('./webpack.base.config')
 
-module.exports = merge(webpackConfig, {
+module.exports = Object.assign({}, base, {
   target: 'node',
+  devtool: null,
   entry: './src/server-entry.js',
-  output: {
+  output: Object.assign({}, base.output, {
     filename: 'server-bundle.js',
     libraryTarget: 'commonjs2'
-  },
+  }),
   externals: {
     firebase: true,
     'lru-cache': true

package.json

@@ -7,8 +7,8 @@
     "dev": "node server",
     "start": "NODE_ENV=production node server",
     "build": "npm run build:client && npm run build:server",
-    "build:client": "NODE_ENV=production webpack --config webpack.client.config.js --progress --hide-modules",
-    "build:server": "NODE_ENV=production webpack --config webpack.server.config.js  --progress --hide-modules"
+    "build:client": "NODE_ENV=production webpack --config build/webpack.client.config.js --progress --hide-modules",
+    "build:server": "NODE_ENV=production webpack --config build/webpack.server.config.js --progress --hide-modules"
   },
   "dependencies": {
     "es6-promise": "^3.2.1",
@@ -33,7 +33,6 @@
     "vue-loader": "^9.2.2",
     "webpack": "^2.1.0-beta.20",
     "webpack-dev-middleware": "^1.6.1",
-    "webpack-hot-middleware": "^2.12.2",
-    "webpack-merge": "^0.14.1"
+    "webpack-hot-middleware": "^2.12.2"
   }
 }

server.js

@@ -19,10 +19,9 @@ const app = express()
 
 if (process.env.NODE_ENV !== 'production') {
   const webpack = require('webpack')
-  const clientConfig = require('./webpack.client.config')
-  const serverConfig = require('./webpack.server.config')
+  const clientConfig = require('./build/webpack.client.config')
 
-  clientConfig.entry = ['webpack-hot-middleware/client', clientConfig.entry]
+  clientConfig.entry.app = ['webpack-hot-middleware/client', clientConfig.entry.app]
   clientConfig.plugins.push(
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoErrorsPlugin()
@@ -40,6 +39,7 @@ if (process.env.NODE_ENV !== 'production') {
 
   // watch and update server renderer
   const MFS = require('memory-fs')
+  const serverConfig = require('./build/webpack.server.config')
   const serverCompiler = webpack(serverConfig)
   const mfs = new MFS()
   serverCompiler.outputFileSystem = mfs
@@ -89,7 +89,11 @@ app.get('*', (req, res) => {
   })
 
   renderStream.on('end', () => {
-    res.end(`<script src="/dist/client-bundle.js"></script></body></html>`)
+    res.end(`
+      <script src="/dist/client-vendor-bundle.js"></script>
+      <script src="/dist/client-bundle.js"></script>
+      </body></html>`
+    )
     console.log(`whole request: ${Date.now() - s}ms`)
   })