Update Dependencies

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015"]
+  "presets": ["env"]
 }

app/App.vue

@@ -80,41 +80,43 @@
 </template>
 
 <style>
-	.serialized-input,
-	.serialized-output {
-		height: 100%;
-	}
-	.serialized-input textarea,
-	.serialized-output textarea {
-		width: 100%;
-		height: 100%;
-		margin: 0;
-		padding: 20px;
-		background: #2f3843;
-		color: rgba(255,255,255,0.9);
-		border: 0;
-		outline: none;
-	}
-	.serialized-editor-wrapper {
-		padding-top: 20px;
-		margin-bottom: 80px;
-	}
-	.no-padding { padding: 0; }
-	.serialized-editor-footer {
-		position: absolute;
-		bottom: 0;
-		width: 100%;
-		text-align: center;
-		margin-bottom: 30px;
-		color: #aaa;
-	}
-	.serialized-editor-footer a {
-		color: #aaa;
-		text-decoration: underline;
-	}
-	.serialized-editor-footer a:hover {
-		color: #777;
-	}
+.serialized-input,
+.serialized-output {
+  height: 100%;
+}
+.serialized-input textarea,
+.serialized-output textarea {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 20px;
+  background: #2f3843;
+  color: rgba(255, 255, 255, 0.9);
+  border: 0;
+  outline: none;
+}
+.serialized-editor-wrapper {
+  padding-top: 20px;
+  margin-bottom: 80px;
+}
+.no-padding {
+  padding: 0;
+}
+.serialized-editor-footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  margin-bottom: 30px;
+  color: #aaa;
+}
+.serialized-editor-footer a {
+  color: #aaa;
+  text-decoration: underline;
+}
+.serialized-editor-footer a:hover {
+  color: #777;
+}
 </style>
 
 <script>
@@ -125,7 +127,7 @@
 			return {
 				input: '',
 				output: '',
-				sampleData: 'a:8:{s:4:"null";N;s:3:"int";i:123;s:6:"string";s:3:"foo";s:4:"bool";b:1;s:5:"array";a:1:{s:3:"foo";s:3:"bar";}s:6:"object";O:8:"stdClass":1:{s:3:"foo";s:3:"bar";}s:6:"class1";O:13:"ExampleClass1":3:{s:25:"ExampleClass1privateVar";s:16:"private variable";s:15:"*protectedVar";s:18:"protected variable";s:9:"publicVar";s:15:"public variable";}s:6:"class2";O:13:"ExampleClass2":3:{s:25:"ExampleClass2privateVar";s:16:"private variable";s:15:"*protectedVar";s:18:"protected variable";s:9:"publicVar";s:15:"public variable";}}',
+				sampleData: 'a:8:{s:4:"null";N:null;s:3:"int";i:123;s:6:"string";s:3:"foo";s:4:"bool";b:1;s:5:"array";a:1:{s:3:"foo";s:3:"bar";}s:6:"object";O:8:"stdClass":1:{s:3:"foo";s:3:"bar";}s:6:"class1";O:13:"ExampleClass1":3:{s:23:"ExampleClass1privateVar";s:16:"private variable";s:13:"*protectedVar";s:18:"protected variable";s:9:"publicVar";s:15:"public variable";}s:6:"class2";O:13:"ExampleClass2":3:{s:23:"ExampleClass2privateVar";s:16:"private variable";s:13:"*protectedVar";s:18:"protected variable";s:9:"publicVar";s:15:"public variable";}}',
 				error: false,
 			}
 		},

build/webpack.app.js

@@ -1,19 +1,19 @@
-var path = require('path');
-var base = require('./webpack.base');
+var path = require("path")
+var base = require("./webpack.base")
 
 module.exports = Object.assign(base, {
-	entry: path.resolve(__dirname, '../app/main.js'),
-	output: {
-		path: path.resolve(__dirname, '../app/dist'),
-		publicPath: '/dist/',
-		filename: 'app.js'
-	},
-	devServer: {
-		contentBase: 'app',
-		historyApiFallback: true,
-		noInfo: true
-	},
-	performance: {
-		hints: false
-	}
-});
+  entry: path.resolve(__dirname, "../app/main.js"),
+  output: {
+    path: path.resolve(__dirname, "../app/dist"),
+    publicPath: "/dist/",
+    filename: "app.js",
+  },
+  devServer: {
+    contentBase: "app",
+    historyApiFallback: true,
+    noInfo: true,
+  },
+  performance: {
+    hints: false,
+  },
+})

build/webpack.base.js

@@ -1,63 +1,48 @@
-var path = require('path');
-var webpack = require('webpack');
+var path = require("path")
+var webpack = require("webpack")
+const VueLoaderPlugin = require("vue-loader/lib/plugin")
 
 module.exports = {
-	module: {
-		rules: [{
-				test: /\.vue$/,
-				loader: 'vue-loader',
-				options: {
-					loaders: {}
-					// other vue-loader options go here
-				}
-			},
-			{
-				test: /\.js$/,
-				loader: 'babel-loader',
-				exclude: /node_modules/
-			},
-			{
-				test: /\.css$/,
-				use: [
-					'style-loader',
-					'css-loader'
-				]
-			},
-			{
-				test: /\.(png|jpg|gif|svg)$/,
-				loader: 'file-loader',
-				options: {
-					name: '[name].[ext]?[hash]'
-				}
-			}
-		]
-	},
-	resolve: {
-		alias: {
-			'vue$': 'vue/dist/vue.esm.js',
-			'@': path.resolve(__dirname, '../src')
-		}
-	},
-	devtool: '#eval-source-map'
+  mode: "none",
+  plugins: [new VueLoaderPlugin()],
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: "vue-loader",
+        options: {
+          loaders: {},
+          // other vue-loader options go here
+        },
+      },
+      {
+        test: /\.js$/,
+        loader: "babel-loader",
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"],
+      },
+      {
+        test: /\.(png|jpg|gif|svg)$/,
+        loader: "file-loader",
+        options: {
+          name: "[name].[ext]?[hash]",
+        },
+      },
+    ],
+  },
+  resolve: {
+    alias: {
+      vue$: "vue/dist/vue.esm.js",
+      "@": path.resolve(__dirname, "../src"),
+    },
+  },
+  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
-		})
-	])
+if (process.env.NODE_ENV === "production") {
+  module.exports.devtool = "#source-map"
+  module.exports.mode = "production"
 }