running webpack dev server for auto reloading of js

Author: srdjan92

assets/VueAppAsset.php

@@ -23,7 +23,7 @@ class VueAppAsset extends AssetBundle
         'css/site.css',
     ];
     public $js = [
-        'app.js'
+        'http://localhost:8080/app.js'
     ];
     public $depends = [
         'yii\web\YiiAsset',

package.json

@@ -7,7 +7,7 @@
     "test": "tests"
   },
   "scripts": {
-    "dev": "webpack --config webpack.config.js",
+    "dev": "webpack-dev-server --config webpack.config.js",
     "prod": "webpack --config webpack.config.js --optimize-minimize --mode production"
   },
   "keywords": [
@@ -34,6 +34,7 @@
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.6.10",
     "webpack": "^4.39.1",
-    "webpack-cli": "^3.3.6"
+    "webpack-cli": "^3.3.6",
+    "webpack-dev-server": "^3.8.0"
   }
 }

webpack.config.js

@@ -22,6 +22,19 @@ module.exports = (env, argv) => {
             path: PATHS.build,
             filename: config.production ? 'app.min.js' : 'app.js'
         },
+        devServer: {
+            stats: {
+                children: false,
+                maxModules: 0
+            },
+            disableHostCheck: true,
+            contentBase: false,
+            hot: true,
+            headers: {
+                'Access-Control-Allow-Origin': '*',
+                'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'
+            }
+        },
         module: {
             rules: [
                 {