initial demo spa app

Author: skyronic

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": ["es2015", "stage-2"],
+  "plugins": ["transform-runtime"],
+  "comments": false
+}

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+  root: true,
+  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
+  extends: 'standard',
+  // required to lint *.vue files
+  plugins: [
+    'html'
+  ],
+  // add your custom rules here
+  'rules': {
+    // allow paren-less arrow functions
+    'arrow-parens': 0,
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+  }
+}

.gitignore

@@ -0,0 +1,4 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log

README.md

@@ -0,0 +1,21 @@
+# webpack-spa
+
+> A Vue.js project
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+
+# run unit tests
+npm test
+```
+
+For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).

build/css-loaders.js

@@ -0,0 +1,52 @@
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+module.exports = function (options) {
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loaders) {
+    var sourceLoader = loaders.map(function (loader) {
+      var extraParamChar
+      if (/\?/.test(loader)) {
+        loader = loader.replace(/\?/, '-loader?')
+        extraParamChar = '&'
+      } else {
+        loader = loader + '-loader'
+        extraParamChar = '?'
+      }
+      return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
+    }).join('!')
+
+    if (options.extract) {
+      return ExtractTextPlugin.extract('vue-style-loader', sourceLoader)
+    } else {
+      return ['vue-style-loader', sourceLoader].join('!')
+    }
+  }
+
+  // http://vuejs.github.io/vue-loader/configurations/extract-css.html
+  return [
+    {
+      key: 'css',
+      value: generateLoaders(['css'])
+    },
+    {
+      key: 'less',
+      value: generateLoaders(['css', 'less'])
+    },
+    {
+      key: 'sass',
+      value: generateLoaders(['css', 'sass?indentedSyntax'])
+    },
+    {
+      key: 'scss',
+      value: generateLoaders(['css', 'sass'])
+    },
+    {
+      key: 'stylus',
+      value: generateLoaders(['css', 'stylus'])
+    },
+    {
+      key: 'styl',
+      value: generateLoaders(['css', 'stylus'])
+    }
+  ]
+}

build/dev-client.js

@@ -0,0 +1,7 @@
+var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
+
+hotClient.subscribe(function (event) {
+  if (event.action === 'reload') {
+    window.location.reload()
+  }
+})

build/dev-server.js

@@ -0,0 +1,41 @@
+var express = require('express')
+var webpack = require('webpack')
+var config = require('./webpack.dev.conf')
+
+var app = express()
+var compiler = webpack(config)
+
+var devMiddleware = require('webpack-dev-middleware')(compiler, {
+  publicPath: config.output.publicPath,
+  stats: {
+    colors: true,
+    chunks: false
+  }
+})
+
+var hotMiddleware = require('webpack-hot-middleware')(compiler)
+// force page reload when html-webpack-plugin template changes
+compiler.plugin('compilation', function (compilation) {
+  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
+    hotMiddleware.publish({ action: 'reload' })
+    cb()
+  })
+})
+
+// handle fallback for HTML5 history API
+app.use(require('connect-history-api-fallback')())
+// serve webpack bundle output
+app.use(devMiddleware)
+// enable hot-reload and state-preserving
+// compilation error display
+app.use(hotMiddleware)
+// serve pure static assets
+app.use('/static', express.static('./static'))
+
+app.listen(8080, function (err) {
+  if (err) {
+    console.log(err)
+    return
+  }
+  console.log('Listening at http://localhost:8080')
+})

build/karma.conf.js

@@ -0,0 +1,19 @@
+var webpackConf = require('./webpack.base.conf')
+delete webpackConf.entry
+webpackConf.devtool = '#inline-source-map'
+
+module.exports = function (config) {
+  config.set({
+    browsers: ['PhantomJS'],
+    frameworks: ['jasmine'],
+    reporters: ['spec'],
+    files: ['../test/unit/index.js'],
+    preprocessors: {
+      '../test/unit/index.js': ['webpack', 'sourcemap']
+    },
+    webpack: webpackConf,
+    webpackMiddleware: {
+      noInfo: true
+    }
+  })
+}

build/webpack.base.conf.js

@@ -0,0 +1,66 @@
+var path = require('path')
+
+module.exports = {
+  entry: {
+    app: './src/main.js'
+  },
+  output: {
+    path: path.resolve(__dirname, '../dist/static'),
+    publicPath: '/static/',
+    filename: '[name].js'
+  },
+  resolve: {
+    extensions: ['', '.js', '.vue'],
+    fallback: [path.join(__dirname, '../node_modules')],
+    alias: {
+      'src': path.resolve(__dirname, '../src')
+    }
+  },
+  resolveLoader: {
+    fallback: [path.join(__dirname, '../node_modules')]
+  },
+  module: {
+    preLoaders: [
+      {
+        test: /\.vue$/,
+        loader: 'eslint',
+        exclude: /node_modules/
+      },
+      {
+        test: /\.js$/,
+        loader: 'eslint',
+        exclude: /node_modules/
+      }
+    ],
+    loaders: [
+      {
+        test: /\.vue$/,
+        loader: 'vue'
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel',
+        exclude: /node_modules/
+      },
+      {
+        test: /\.json$/,
+        loader: 'json'
+      },
+      {
+        test: /\.html$/,
+        loader: 'vue-html'
+      },
+      {
+        test: /\.(png|jpg|gif|svg)$/,
+        loader: 'url',
+        query: {
+          limit: 10000,
+          name: '[name].[ext]?[hash:7]'
+        }
+      }
+    ]
+  },
+  eslint: {
+    formatter: require('eslint-friendly-formatter')
+  }
+}

build/webpack.dev.conf.js

@@ -0,0 +1,43 @@
+var webpack = require('webpack')
+var config = require('./webpack.base.conf')
+var cssLoaders = require('./css-loaders')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+
+// eval-source-map is faster for development
+config.devtool = '#eval-source-map'
+
+config.vue = config.vue || {}
+config.vue.loaders = config.vue.loaders || {}
+cssLoaders({
+  sourceMap: false,
+  extract: false
+}).forEach(function (loader) {
+  config.vue.loaders[loader.key] = loader.value
+})
+
+// add hot-reload related code to entry chunks
+var polyfill = 'eventsource-polyfill'
+var devClient = './build/dev-client'
+Object.keys(config.entry).forEach(function (name, i) {
+  var extras = i === 0 ? [polyfill, devClient] : [devClient]
+  config.entry[name] = extras.concat(config.entry[name])
+})
+
+// necessary for the html plugin to work properly
+// when serving the html from in-memory
+config.output.publicPath = '/'
+
+config.plugins = (config.plugins || []).concat([
+  // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
+  new webpack.optimize.OccurenceOrderPlugin(),
+  new webpack.HotModuleReplacementPlugin(),
+  new webpack.NoErrorsPlugin(),
+  // https://github.com/ampedandwired/html-webpack-plugin
+  new HtmlWebpackPlugin({
+    filename: 'index.html',
+    template: 'index.html',
+    inject: true
+  })
+])
+
+module.exports = config

build/webpack.prod.conf.js

@@ -0,0 +1,59 @@
+var webpack = require('webpack')
+var config = require('./webpack.base.conf')
+var cssLoaders = require('./css-loaders')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+
+// naming output files with hashes for better caching.
+// dist/index.html will be auto-generated with correct URLs.
+config.output.filename = '[name].[chunkhash].js'
+config.output.chunkFilename = '[id].[chunkhash].js'
+
+// whether to generate source map for production files.
+// disabling this can speed up the build.
+var SOURCE_MAP = true
+
+config.devtool = SOURCE_MAP ? '#source-map' : false
+
+config.vue = config.vue || {}
+config.vue.loaders = config.vue.loaders || {}
+cssLoaders({
+  sourceMap: SOURCE_MAP,
+  extract: true
+}).forEach(function (loader) {
+  config.vue.loaders[loader.key] = loader.value
+})
+
+config.plugins = (config.plugins || []).concat([
+  // http://vuejs.github.io/vue-loader/workflow/production.html
+  new webpack.DefinePlugin({
+    'process.env': {
+      NODE_ENV: '"production"'
+    }
+  }),
+  new webpack.optimize.UglifyJsPlugin({
+    compress: {
+      warnings: false
+    }
+  }),
+  new webpack.optimize.OccurenceOrderPlugin(),
+  // extract css into its own file
+  new ExtractTextPlugin('[name].[contenthash].css'),
+  // generate dist index.html with correct asset hash for caching.
+  // you can customize output by editing /index.html
+  // see https://github.com/ampedandwired/html-webpack-plugin
+  new HtmlWebpackPlugin({
+    filename: '../index.html',
+    template: 'index.html',
+    inject: true,
+    minify: {
+      removeComments: true,
+      collapseWhitespace: true,
+      removeAttributeQuotes: true
+      // more options:
+      // https://github.com/kangax/html-minifier#options-quick-reference
+    }
+  })
+])
+
+module.exports = config

index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Webpack Single Page App</title>
+    <link rel="stylesheet" href="/static/normalize.css" />
+  </head>
+  <body>
+  	<div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>