upgrade webpack + fix warnings

package.json

@@ -22,7 +22,7 @@
   },
   "main": "src/OpenApi.vue",
   "scripts": {
-    "dev": "NODE_ENV=development webpack --watch",
+    "dev": "cross-env NODE_ENV=development webpack --watch",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
@@ -41,6 +41,7 @@
     "babel-preset-es2015": "^6.18.0",
     "babel-preset-stage-2": "^6.18.0",
     "browser-sync": "^2.18.2",
+    "cross-env": "^5.0.0",
     "css-loader": "^0.26.0",
     "eslint": "^3.11.0",
     "eslint-config-standard": "^6.2.1",
@@ -53,10 +54,10 @@
     "json-loader": "^0.5.4",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
-    "vue": "2.2.1",
-    "vue-loader": "^10.0.1",
+    "vue": "^2.2.1",
+    "vue-loader": "^11.1.4",
     "vue-style-loader": "^1.0.0",
-    "vue-template-compiler": "2.2.1",
-    "webpack": "^1.13.3"
+    "vue-template-compiler": "^2.2.1",
+    "webpack": "^2.2.0"
   }
 }

src/OpenApi.vue

@@ -31,11 +31,11 @@
 
     <md-layout md-row style="flex-wrap: nowrap;">
       <md-list class="md-dense" ref="menu">
-          <md-list-item v-for="(entries, tag) in tags" md-expand-multiple>
+          <md-list-item v-for="(entries, tag) in tags" :key="tag" md-expand-multiple>
             <span class="md-title">{{tag}}</span>
             <md-list-expand>
               <md-list>
-                <md-list-item v-for="entry in entries" @click.native="select(entry)">
+                <md-list-item v-for="(entry, i) in entries" :key="i" @click.native="select(entry)">
                   <md-subheader class="md-title" :class="{'md-accent':selectedEntry === entry}" v-html="entry.path.replace(/\//g,'<b>/</b>')"></md-subheader>
                   <md-subheader :md-theme="entry.method" class="md-primary">{{entry.method}}</md-subheader>
                 </md-list-item>

src/ParametersTable.vue

@@ -18,7 +18,7 @@
         <md-table-cell v-if="!selectedEntry.requestBody.content"></md-table-cell>
         <md-table-cell v-if="selectedEntry.requestBody.content">
           <md-select v-model="selectedEntry.requestBody.selectedType">
-            <md-option v-for="contentType in Object.keys(selectedEntry.requestBody.content)" :value="contentType">{{contentType}}</md-option>
+            <md-option v-for="contentType in Object.keys(selectedEntry.requestBody.content)" :key="contentType" :value="contentType">{{contentType}}</md-option>
           </md-select>
         </md-table-cell>
         <md-table-cell v-if="!selectedEntry.requestBody.content || !selectedEntry.requestBody.content[selectedEntry.requestBody.selectedType].schema"></md-table-cell>
@@ -32,7 +32,7 @@
       </md-table-row>
 
 
-      <md-table-row v-for="parameter in selectedEntry.parameters">
+      <md-table-row v-for="(parameter, i) in selectedEntry.parameters" :key="i">
         <md-table-cell>{{parameter.name}}</md-table-cell>
         <md-table-cell v-html="marked(parameter.description)"></md-table-cell>
         <md-table-cell v-if="parameter.schema.type !== 'array'">{{parameter.schema.type}}</md-table-cell>

src/RequestForm.vue

@@ -5,7 +5,7 @@
       <md-textarea name="payload" v-model="currentRequest.body"></md-textarea>
     </md-input-container>
 
-    <div v-for="parameter in selectedEntry.parameters">
+    <div v-for="(parameter, i) in selectedEntry.parameters" :key="i">
       <md-input-container v-if="(parameter.schema.type === 'string' || parameter.schema.type === 'integer' || parameter.schema.type === 'number') && !parameter.schema.enum">
         <label>{{parameter.name}}</label>
         <md-input v-model="currentRequest.params[parameter.name]" :type="parameter.schema.type === 'string' ? 'text' : 'number'"></md-input>
@@ -14,14 +14,14 @@
       <md-input-container v-if="parameter.schema.enum">
         <label>{{parameter.name}}</label>
         <md-select v-model="currentRequest.params[parameter.name]">
-          <md-option v-for="val in parameter.schema.enum" :value="val">{{val}}</md-option>
+          <md-option v-for="val in parameter.schema.enum" :key="val" :value="val">{{val}}</md-option>
         </md-select>
       </md-input-container>
 
       <md-input-container v-if="parameter.schema.type === 'array' && parameter.schema.items.enum">
         <label>{{parameter.name}}</label>
         <md-select v-model="currentRequest.params[parameter.name]" multiple>
-          <md-option v-for="val in parameter.schema.items.enum" :value="val">{{val}}</md-option>
+          <md-option v-for="val in parameter.schema.items.enum" :key="val" :value="val">{{val}}</md-option>
         </md-select>
       </md-input-container>
 

src/ResponsesTable.vue

@@ -11,13 +11,13 @@
     </md-table-header>
 
     <md-table-body>
-      <md-table-row v-for="(response, code) in selectedEntry.responses">
+      <md-table-row v-for="(response, code) in selectedEntry.responses" :key="code">
         <md-table-cell>{{code}}</md-table-cell>
         <md-table-cell v-html="marked(response.description)"></md-table-cell>
         <md-table-cell v-if="!response.content"></md-table-cell>
         <md-table-cell v-if="response.content">
           <md-select v-model="response.selectedType">
-            <md-option v-for="(value, content) in response.content" :value="content">{{content}}</md-option>
+            <md-option v-for="(value, content) in response.content" :key="content" :value="content">{{content}}</md-option>
           </md-select>
         </md-table-cell>
         <md-table-cell v-if="!response.content || !response.content[response.selectedType].schema"></md-table-cell>

webpack.config.js

@@ -1,40 +1,65 @@
+var path = require('path')
 var webpack = require('webpack')
 
 module.exports = {
   entry: './test/app.js',
   output: {
     filename: 'bundle.js',
-    path: './test/',
-    publicPath: '/',
-    chunkFilename: '[id].[hash].app.js'
+    path: path.resolve(__dirname, './test'),
+    publicPath: '/'
   },
   module: {
-    loaders: [{
-      test: /\.vue$/,
-      loader: 'vue'
-    }, {
-      test: /\.js$/,
-      exclude: /(node_modules|bower_components)/,
-      loader: 'babel-loader',
-      query: {
-        presets: ['es2015']
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader'
+      }, {
+        test: /\.js$/,
+        exclude: /(node_modules|bower_components)/,
+        loader: 'babel-loader'
+      }, {
+        test: /\.css$/,
+        loader: process.env.NODE_ENV !== 'development' ? 'style-loader!css-loader?minimize' : 'style-loader!css-loader?-minimize'
+      }, {
+        test: /\.json$/,
+        loader: 'json-loader'
       }
-    }, {
-      test: /\.css$/,
-      loader: process.env.NODE_ENV !== 'development' ? 'style!css?minimize' : 'style!css?-minimize'
-    }, {
-      test: /\.json$/,
-      loader: 'json-loader'
-    }]
+    ]
   },
   resolve: {
     alias: {
-      'vue$': 'vue/dist/vue.common.js'
+      'vue$': 'vue/dist/vue.esm.js'
     }
   },
-  devtool: process.env.NODE_ENV !== 'development' ? 'source-map' : 'eval',
-  plugins: process.env.NODE_ENV !== 'development' ? [
-    new webpack.optimize.UglifyJsPlugin(),
-    new webpack.optimize.DedupePlugin()
-  ] : []
+  devServer: {
+    historyApiFallback: false,
+    noInfo: false,
+    proxy: [{
+      context: ['/wotapps', '/avatars', '/registry'],
+      target: 'http://localhost:9999',
+      secure: false
+    }]
+  },
+  devtool: '#eval-source-map'
+}
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports.devtool = '#source-map'
+  // http://vue-loader.vuejs.org/en/workflow/production.html
+  module.exports.plugins = (module.exports.plugins || []).concat([
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"'
+      }
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      sourceMap: true,
+      compress: {
+        warnings: false
+      }
+    }),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true
+    })
+  ])
 }