complete version 1.0.0 😄 🐝 🐙

ccforward · Dec 26, 2016 · 8a1fabd · 8a1fabd
1 parent fd6a744
commit 8a1fabd
Show file tree

Hide file tree

Showing 12 changed files with 81 additions and 26 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,5 +2,4 @@ node_modules/
 npm-debug.log
 *.log
 *.DS_Store
-log
-dist/
+log
diff --git a/app.js b/app.js
@@ -25,8 +25,7 @@ const createRenderer =  bundle => {
 }
 
 const parseHTML = tmpl => {
-  const placeholder = '<!-- APP -->'
-
+  const placeholder = '{{ APP }}'
   const i = tmpl.indexOf(placeholder)
   return {
     head: tmpl.slice(0, i),

diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
@@ -8,18 +8,18 @@ const config = {
   devtool: '#source-map',
   entry: {
     app: './src/client-entry.js',
-    vendor: [
-      'es6-promise',
-      'vue',
-      'vue-router',
-      'vuex',
-      'vuex-router-sync'
-    ]
+    // vendor: [
+    //   'es6-promise',
+    //   'vue',
+    //   'vue-router',
+    //   'vuex',
+    //   'vuex-router-sync'
+    // ]
   },
   output: {
     path: path.resolve(__dirname, '../dist'),
     publicPath: '/dist',
-    filename: '[name].[chunkhash:5].js'
+    filename: '[name].[chunkhash:5].js',
   },
   resolve: {
     alias: {

diff --git a/build/webpack.client.conf.js b/build/webpack.client.conf.js
@@ -1,6 +1,6 @@
 const base = require('./webpack.base.conf')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const HTMLPlugin = require('html-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
 const vueConfig = require('./vue-loader.conf')
 const webpack = require('webpack')
 
@@ -14,15 +14,43 @@ const config = Object.assign({}, base, {
     new webpack.optimize.CommonsChunkPlugin({
       name: 'vendor'
     }),
-    new HTMLPlugin({
+    new HtmlWebpackPlugin({
       template: 'src/index.html',
-      inject: process.env.NODE_ENV !== 'production' ? 'body' : false,
+      // inject: process.env.NODE_ENV !== 'production' ? 'body' : false,
+      inject: true,
       minify: {
-        collapseWhitespace: true
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
       },
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency',
       environment: process.env.NODE_ENV
     }),
-    new ExtractTextPlugin('styles.[hash:5].css')
+    new ExtractTextPlugin('styles.[hash:5].css'),
+    new webpack.optimize.OccurrenceOrderPlugin(),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks: function (module, count) {
+        // any required modules inside node_modules are extracted to vendor
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(
+            path.join(__dirname, '../node_modules')
+          ) === 0
+        )
+      }
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      chunks: ['vendor']
+    }),
   ])
 })
 

diff --git a/dist/app.03bbb.js b/dist/app.03bbb.js
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html><html lang=zh-cn><head><meta charset=utf-8><title>Vue.js SSR Template</title><meta name=mobile-web-app-capable content=yes><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,minimal-ui"><meta name=description content="<!-- DESCRIPTION -->"><meta name=keywords content="<!-- KEYWORDS -->"><link rel=icon href=public/favicon.ico sizes=16x16><link rel=stylesheet href=/dist/styles.55110.css><link href=/dist/styles.55110.css rel=stylesheet></head><body><noscript id=deferred-styles></noscript>{{ APP }}<script>var loadDeferredStyles = function() { var e = document.getElementById("deferred-styles"),t = document.head.getElementsByTagName("meta");t[t.length - 1].insertAdjacentHTML("afterend", e.textContent);e.parentElement.removeChild(e) }
+      var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame; raf ? raf(function() { window.setTimeout(loadDeferredStyles, 0) }) : window.addEventListener("load", loadDeferredStyles);</script><script defer=defer src=/dist/manifest.02f73.js></script><script defer=defer src=/dist/app.03bbb.js></script><script type=text/javascript src=/dist/manifest.02f73.js></script><script type=text/javascript src=/dist/app.03bbb.js></script></body></html>
diff --git a/dist/manifest.02f73.js b/dist/manifest.02f73.js
diff --git a/dist/server-bundle.js b/dist/server-bundle.js
diff --git a/dist/styles.55110.css b/dist/styles.55110.css
diff --git a/dist/styles.55110.css.map b/dist/styles.55110.css.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-ssr",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "description": "Vue.js Server Side Render Template with Webpack & Express",
   "main": "index.js",
   "scripts": {
@@ -20,12 +20,7 @@
     "express": "^4.14.0",
     "lru-cache": "^4.0.2",
     "serialize-javascript": "^1.3.0",
-    "serve-favicon": "^2.3.2",
-    "vue": "^2.1.7",
-    "vue-router": "^2.1.1",
-    "vue-server-renderer": "^2.1.7",
-    "vuex": "^2.1.1",
-    "vuex-router-sync": "^4.0.2"
+    "serve-favicon": "^2.3.2"
   },
   "devDependencies": {
     "autoprefixer": "^6.6.0",
@@ -48,7 +43,12 @@
     "vue-template-compiler": "^2.1.7",
     "webpack": "^2.1.0-beta.26",
     "webpack-dev-middleware": "^1.9.0",
-    "webpack-hot-middleware": "^2.14.0"
+    "webpack-hot-middleware": "^2.14.0",
+    "vue": "^2.1.7",
+    "vue-router": "^2.1.1",
+    "vue-server-renderer": "^2.1.7",
+    "vuex": "^2.1.1",
+    "vuex-router-sync": "^4.0.2"
   },
   "keywords": [
     "Vue",

diff --git a/src/index.html b/src/index.html
@@ -16,7 +16,8 @@
   </head>
   <body>
     <noscript id="deferred-styles"></noscript>
-    <!-- APP -->
+    <!-- placeholder -->
+    {{ APP }}
     <script>
       var loadDeferredStyles = function() { var e = document.getElementById("deferred-styles"),t = document.head.getElementsByTagName("meta");t[t.length - 1].insertAdjacentHTML("afterend", e.textContent);e.parentElement.removeChild(e) }
       var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame; raf ? raf(function() { window.setTimeout(loadDeferredStyles, 0) }) : window.addEventListener("load", loadDeferredStyles);
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,5 +2,4 @@ node_modules/ @@
     npm-debug.log
     *.log
     *.DS_Store
-    log
-    dist/
+    log
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<!DOCTYPE html><html lang=zh-cn><head><meta charset=utf-8><title>Vue.js SSR Template</title><meta name=mobile-web-app-capable content=yes><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,minimal-ui"><meta name=description content="<!-- DESCRIPTION -->"><meta name=keywords content="<!-- KEYWORDS -->"><link rel=icon href=public/favicon.ico sizes=16x16><link rel=stylesheet href=/dist/styles.55110.css><link href=/dist/styles.55110.css rel=stylesheet></head><body><noscript id=deferred-styles></noscript>{{ APP }}<script>var loadDeferredStyles = function() { var e = document.getElementById("deferred-styles"),t = document.head.getElementsByTagName("meta");t[t.length - 1].insertAdjacentHTML("afterend", e.textContent);e.parentElement.removeChild(e) }
		var raf = requestAnimationFrame \|\| mozRequestAnimationFrame \|\| webkitRequestAnimationFrame \|\| msRequestAnimationFrame; raf ? raf(function() { window.setTimeout(loadDeferredStyles, 0) }) : window.addEventListener("load", loadDeferredStyles);</script><script defer=defer src=/dist/manifest.02f73.js></script><script defer=defer src=/dist/app.03bbb.js></script><script type=text/javascript src=/dist/manifest.02f73.js></script><script type=text/javascript src=/dist/app.03bbb.js></script></body></html>