upgraded dev dependencies; Webpack 4

.babelrc

@@ -1,5 +1,11 @@
 {
-  "presets": ["es2015", "stage-2"],
-  "plugins": [],
-  "comments": false
-}
+    "presets": [
+        ["@babel/preset-env", { "modules": false } ]
+    ],
+    "plugins": [
+        "@babel/plugin-syntax-dynamic-import",
+        "@babel/plugin-transform-runtime",
+        "@babel/plugin-transform-object-assign",
+        "@babel/plugin-proposal-object-rest-spread"
+    ]
+}

.eslintrc.json

@@ -0,0 +1,44 @@
+{
+    "env": {
+        "browser": true,
+        "commonjs": true,
+        "es6": true,
+        "node": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:vue/recommended",
+        "plugin:import/errors",
+        "plugin:import/warnings"
+    ],
+    "parserOptions": {
+        "parser": "babel-eslint",
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 2017,
+        "sourceType": "module"
+    },
+    "plugins": ["vue", "prettier"],
+    "rules": {
+        "no-const-assign": "warn",
+        "no-this-before-super": "warn",
+        "no-undef": "warn",
+        "no-unreachable": "warn",
+        "no-unused-vars": "off",
+        "constructor-super": "warn",
+        "valid-typeof": "warn",
+        "import/no-unresolved": "off",
+        "import/no-unassigned-import": "warn",
+        "semi": 0,
+        "no-console": "off",
+        "prettier/prettier": "error",
+        "vue/max-attributes-per-line": [2, {
+          "singleline": 2,
+          "multiline": {
+            "max": 1,
+            "allowFirstLine": true
+          }
+        }]
+    }
+  }

build/webpack.config.js

@@ -1,42 +1,42 @@
-var path = require('path')
-var webpack = require('webpack')
-const VueLoaderPlugin = require('vue-loader/lib/plugin')
+var path = require("path");
+var webpack = require("webpack");
+const VueLoaderPlugin = require("vue-loader/lib/plugin");
 
 module.exports = {
-  entry: './src/index.js',
+  entry: "./src/index.js",
   output: {
-    path: path.resolve(__dirname, '../dist'),
-    publicPath: '/dist/',
-    filename: 'index.js',
-    library:'vue-web-cam',
-    libraryTarget: 'umd'
+    path: path.resolve(__dirname, "../dist"),
+    publicPath: "/dist/",
+    filename: "index.js",
+    library: "vue-web-cam",
+    libraryTarget: "umd"
   },
   module: {
     rules: [
       {
         test: /\.vue$/,
-        loader: 'vue-loader',
+        loader: "vue-loader",
         options: {
           loaders: {
-            'scss': 'vue-style-loader!css-loader!sass-loader',
-            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
+            scss: "vue-style-loader!css-loader!sass-loader",
+            sass: "vue-style-loader!css-loader!sass-loader?indentedSyntax"
           }
         }
       },
       {
         test: /\.js$/,
-        loader: 'babel-loader',
+        loader: "babel-loader",
         exclude: /node_modules/
       }
     ]
   },
   externals: {
-    vue: 'vue'
+    vue: "vue"
   },
   resolve: {
-    extensions: ['.js', '.vue'],
+    extensions: [".js", ".vue"],
     alias: {
-      'vue': 'vue/dist/vue.esm.js'
+      vue: "vue/dist/vue.esm.js"
     }
   },
   devServer: {
@@ -49,12 +49,12 @@ module.exports = {
   plugins: [
     new VueLoaderPlugin(),
     new webpack.DefinePlugin({
-      'process.env': {
+      "process.env": {
         NODE_ENV: '"production"'
       }
     }),
     new webpack.LoaderOptionsPlugin({
       minimize: true
     })
   ]
-}
+};

demo/src/main.js

@@ -1,10 +1,10 @@
-import Vue from 'vue'
-import App from './main.vue'
+import Vue from "vue";
+import App from "./main.vue";
 
 // import WebCam from 'plugin'
 // Vue.use(WebCam)
 
 new Vue({
-  el: '#app',
+  el: "#app",
   render: h => h(App)
-})
+});

demo/src/main.vue

@@ -6,44 +6,52 @@
         <code v-if="device">{{ device.label }}</code>
         <div class="border">
           <web-cam ref="webcam"
-                width="100%"
-                :deviceId="deviceId"
-                @started="onStarted" 
-                @stopped="onStopped" 
-                @error="onError"
-                @cameras="onCameras"
-                @camera-change="onCameraChange" />
+                   :device-id="deviceId"
+                   width="100%"
+                   @started="onStarted" 
+                   @stopped="onStopped" 
+                   @error="onError"
+                   @cameras="onCameras"
+                   @camera-change="onCameraChange" />
         </div>
 
         <div class="row">
           <div class="col-md-12">
             <select v-model="camera">
               <option>-- Select Device --</option>
-              <option v-for="device in devices" :key="device.deviceId" :value="device.deviceId">{{ device.label }}</option>
+              <option v-for="device in devices" 
+                      :key="device.deviceId" 
+                      :value="device.deviceId">{{ device.label }}</option>
             </select>
           </div>
           <div class="col-md-12">
-            <button type="button" class="btn btn-primary" @click="onCapture">Capture Photo</button>
-            <button type="button" class="btn btn-danger" @click="onStop">Stop Camera</button>
-            <button type="button" class="btn btn-success" @click="onStart">Start Camera</button>
+            <button type="button" 
+                    class="btn btn-primary" 
+                    @click="onCapture">Capture Photo</button>
+            <button type="button" 
+                    class="btn btn-danger" 
+                    @click="onStop">Stop Camera</button>
+            <button type="button" 
+                    class="btn btn-success" 
+                    @click="onStart">Start Camera</button>
           </div>
         </div>
       </div>
       <div class="col-md-6">
         <h2>Captured Image</h2>
         <figure class="figure">
-          <img :src="img" class="img-responsive" />
+          <img :src="img" class="img-responsive" >
         </figure>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import {WebCam} from 'plugin';
-import {find, head} from 'lodash';
+import { WebCam } from "vue-web-cam";
+import { find, head } from "lodash";
 export default {
-  name: 'app',
+  name: "App",
   components: {
     WebCam
   },
@@ -67,7 +75,7 @@ export default {
     devices: function() {
       // Once we have a list select the first one
       let first = head(this.devices);
-      if(first) {
+      if (first) {
         this.camera = first.deviceId;
         this.deviceId = first.deviceId;
       }
@@ -78,10 +86,10 @@ export default {
       this.img = this.$refs.webcam.capture();
     },
     onStarted(stream) {
-      console.log('On Started Event', stream);
+      console.log("On Started Event", stream);
     },
     onStopped(stream) {
-      console.log('On Stopped Event', stream);
+      console.log("On Stopped Event", stream);
     },
     onStop() {
       this.$refs.webcam.stop();
@@ -90,16 +98,16 @@ export default {
       this.$refs.webcam.start();
     },
     onError(error) {
-      console.log('On Error Event', error);
+      console.log("On Error Event", error);
     },
     onCameras(cameras) {
       this.devices = cameras;
-      console.log('On Cameras Event', cameras);
+      console.log("On Cameras Event", cameras);
     },
     onCameraChange(deviceId) {
       this.deviceId = deviceId;
-      this.camera = deviceId
-      console.log('On Camera Change Event', deviceId);
+      this.camera = deviceId;
+      console.log("On Camera Change Event", deviceId);
     }
   }
 };

demo/webpack.config.js

@@ -1,50 +1,51 @@
-var path = require('path')
-var webpack = require('webpack');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-const VueLoaderPlugin = require('vue-loader/lib/plugin')
+var path = require("path");
+var webpack = require("webpack");
+var HtmlWebpackPlugin = require("html-webpack-plugin");
+const VueLoaderPlugin = require("vue-loader/lib/plugin");
 
 module.exports = {
-  entry: './demo/src/main.js',
+  mode: "development",
+  entry: "./demo/src/main.js",
   output: {
-    path: path.resolve(__dirname, './dist'),
-    publicPath: '/',
-    filename: 'build.js'
+    path: path.resolve(__dirname, "./dist"),
+    publicPath: "/",
+    filename: "build.js"
   },
   module: {
     rules: [
       {
         test: /\.vue$/,
-        loader: 'vue-loader',
+        loader: "vue-loader",
         options: {
           loaders: {
             // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
             // the "scss" and "sass" values for the lang attribute to the right configs here.
             // other preprocessors should work out of the box, no loader config like this necessary.
-            'scss': 'vue-style-loader!css-loader!sass-loader',
-            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
+            scss: "vue-style-loader!css-loader!sass-loader",
+            sass: "vue-style-loader!css-loader!sass-loader?indentedSyntax"
           }
           // other vue-loader options go here
         }
       },
       {
         test: /\.js$/,
-        loader: 'babel-loader',
+        loader: "babel-loader",
         exclude: /node_modules/
       },
       {
         test: /\.(png|jpg|gif|svg)$/,
-        loader: 'file-loader',
+        loader: "file-loader",
         options: {
-          name: '[name].[ext]?[hash]'
+          name: "[name].[ext]?[hash]"
         }
       }
     ]
   },
   resolve: {
-    extensions: ['.js', '.vue'],
+    extensions: [".js", ".vue"],
     alias: {
-      'vue': 'vue/dist/vue.esm.js',
-      'plugin': path.resolve(__dirname, "../dist/index.js")
+      vue: "vue/dist/vue.esm.js",
+      plugin: path.resolve(__dirname, "../dist/build.js")
     }
   },
   devServer: {
@@ -54,38 +55,32 @@ module.exports = {
   performance: {
     hints: false
   },
-  devtool: '#eval-source-map',
+  devtool: "#eval-source-map",
   plugins: [
     new VueLoaderPlugin(),
     new webpack.DefinePlugin({
-      'process.env': "'development'"
+      "process.env": "'development'"
     }),
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoEmitOnErrorsPlugin(),
     new HtmlWebpackPlugin({
-      filename: 'index.html',
-      template: 'index.html',
+      filename: "index.html",
+      template: "index.html",
       inject: true
     })
   ]
-}
+};
 
-if (process.env.NODE_ENV === 'production') {
+if (process.env.NODE_ENV === "production") {
   // http://vue-loader.vuejs.org/en/workflow/production.html
   module.exports.plugins = (module.exports.plugins || []).concat([
     new webpack.DefinePlugin({
-      'process.env': {
+      "process.env": {
         NODE_ENV: '"production"'
       }
     }),
-    new webpack.optimize.UglifyJsPlugin({
-      sourceMap: true,
-      compress: {
-        warnings: false
-      }
-    }),
     new webpack.LoaderOptionsPlugin({
       minimize: true
     })
-  ])
-}
+  ]);
+}