webpack

package.json

@@ -14,14 +14,12 @@
     "axios": "^0.18.0",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.4",
-    "babel-plugin-dynamic-import-node": "^1.2.0",
     "babel-plugin-dynamic-import-webpack": "^1.0.2",
-    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-preset-env": "^1.6.1",
     "bootstrap": "^4.1.0",
     "bootstrap-sass": "^3.3.7",
+    "copy-webpack-plugin": "^4.5.1",
     "css-loader": "^0.28.11",
-    "es6-promise": "^4.2.4",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "html-webpack-plugin": "^3.2.0",
     "jquery": "^3.3.1",
@@ -29,7 +27,6 @@
     "node-sass": "^4.8.3",
     "path": "^0.12.7",
     "popper.js": "^1.14.0",
-    "promise-polyfill": "^7.1.2",
     "sass-loader": "^6.0.7",
     "style-loader": "^0.20.3",
     "vue": "^2.5.16",

public/css/app.css

@@ -1,4 +1,11 @@
-@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);@charset "UTF-8";
+@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
+body[data-v-7435e7a7], .tasks-list[data-v-7435e7a7] {
+    padding-top: 20px;
+}
+.done label[data-v-7435e7a7] {
+    text-decoration: line-through;
+}
+@charset "UTF-8";
 /*!
  * Bootstrap v3.3.7 (http://getbootstrap.com)
  * Copyright 2011-2016 Twitter, Inc.

resources/assets/js/app.js

@@ -1,17 +1,12 @@
-//import 'babel-polyfill';
-
-// import jQuery from 'jquery';
-//
-// window.$ = window.jQuery = jQuery;
-
-//import vue from 'vue';
-//import Tasks from './components/Tasks.vue';
+import jQuery from 'jquery';
+import vue from 'vue';
+import Tasks from './components/Tasks.vue';
 
 import main from '../sass/app.scss';
 
+window.$ = window.jQuery = jQuery;
 
-
-// const app = new vue({
-//     el: '#app',
-//     components: {Tasks}
-// });
+const app = new vue({
+    el: '#app',
+    components: {Tasks}
+});

resources/views/layouts/app.blade.php

@@ -65,12 +65,17 @@
 
                                 <ul class="dropdown-menu">
                                     <li><a href="{{ route('companies.index') }}"><i class="fa fa-building"
-                                                                                        aria-hidden="true"></i>All Companies</a></li>
-                                        <li><a href="{{ route('projects.index') }}"><i class="fas fa-briefcase"></i>All Projects</a>
+                                                                                    aria-hidden="true"></i>All Companies</a>
                                     </li>
-                                        <li><a href="{{ route('tasks.index') }}"><i class="fas fa-tasks"></i>All Tasks</a></li>
-                                        <li><a href="{{ route('users.index') }}"><i class="fas fa-user"></i>All Users</a></li>
-                                        <li><a href="{{ route('roles.index') }}"><i class="fas fa-envelope"></i>All Roles</a></li>
+                                    <li><a href="{{ route('projects.index') }}"><i class="fas fa-briefcase"></i>All
+                                            Projects</a>
+                                    </li>
+                                    <li><a href="{{ route('tasks.index') }}"><i class="fas fa-tasks"></i>All Tasks</a>
+                                    </li>
+                                    <li><a href="{{ route('users.index') }}"><i class="fas fa-user"></i>All Users</a>
+                                    </li>
+                                    <li><a href="{{ route('roles.index') }}"><i class="fas fa-envelope"></i>All
+                                            Roles</a></li>
 
                                 </ul>
                             </li>
@@ -116,6 +121,9 @@
 </div>
 
 <!-- Scripts -->
+<script src="{{ asset('js/polyfill.js') }}"></script>
+<script src="{{ asset('js/jquery.js') }}"></script>
+<script src="{{ asset('js/vue.js') }}"></script>
 <script src="{{ asset('js/app.js') }}"></script>
 
 <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"

resources/views/welcome.blade.php

@@ -13,8 +13,9 @@
     <Tasks></Tasks>
 </div>
 
-        <script src="{{ asset('js/app.js') }}"></script>
-        <script src="{{ asset('js/jquery.js') }}"></script>
 <script src="{{ asset('js/polyfill.js') }}"></script>
+<script src="{{ asset('js/jquery.js') }}"></script>
+<script src="{{ asset('js/vue.js') }}"></script>
+<script src="{{ asset('js/app.js') }}"></script>
 </body>
 </html>

webpack.config.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 const extractSass = new ExtractTextPlugin({
     filename: (getPath) => {
@@ -11,7 +12,6 @@ const extractSass = new ExtractTextPlugin({
 const config = {
     entry: {
         app: './resources/assets/js/app.js',
-        jquery: 'jquery',
         polyfill: 'babel-polyfill'
     },
     output:
@@ -54,11 +54,22 @@ const config = {
         ]
     },
     plugins: [
-        extractSass
+        extractSass,
+        new CopyWebpackPlugin([
+            {
+                from: path.resolve(__dirname,"resources/assets/js/jquery.js"),
+                to: path.resolve(__dirname,"public/js/jquery.js")
+            },
+            {
+                from: path.resolve(__dirname,"resources/assets/js/vue.js"),
+                to: path.resolve(__dirname,"public/js/vue.js")
+            }
+        ])
     ],
-    // externals: {
-    //     "vue": 'vue'
-    // },
+    externals: {
+        jquery: "jQuery",
+        vue: "Vue"
+    },
     resolve: {
         alias: {
             'vue$': 'vue/dist/vue.js'