Merge branch 'webpack-2018'

resources/assets/js/components/index.js

@@ -21,7 +21,6 @@ let componentMapping = {
 window.components = {};
 
 let componentNames = Object.keys(componentMapping);
-initAll();
 
 /**
  * Initialize components of the given name within the given element.
@@ -53,4 +52,6 @@ function initAll(parentElement) {
     }
 }
 
-window.components.init = initAll;
+window.components.init = initAll;
+
+export default initAll;

resources/assets/js/index.js

@@ -1,6 +1,12 @@
-"use strict";
-require("babel-polyfill");
-require('./dom-polyfills');
+import "babel-polyfill"
+import "./dom-polyfills"
+import "./pages/page-show"
+import Translations from "./translations"
+import vues from "./vues/vues"
+import components from "./components"
+
+import Vue from "vue"
+import axios from "axios"
 
 // Url retrieval function
 window.baseUrl = function(path) {
@@ -37,9 +43,6 @@ class EventManager {
 
 window.$events = new EventManager();
 
-const Vue = require("vue");
-const axios = require("axios");
-
 let axiosInstance = axios.create({
     headers: {
         'X-CSRF-TOKEN': document.querySelector('meta[name=token]').getAttribute('content'),
@@ -60,14 +63,13 @@ Vue.prototype.$events = window.$events;
 
 // Translation setup
 // Creates a global function with name 'trans' to be used in the same way as Laravel's translation system
-const Translations = require("./translations");
 let translator = new Translations(window.translations);
 window.trans = translator.get.bind(translator);
 window.trans_choice = translator.getPlural.bind(translator);
 
-
-require("./vues/vues");
-require("./components");
+// Load vues and components
+vues();
+components();
 
 
 //Global jQuery Config & Extensions
@@ -125,6 +127,3 @@ if(navigator.userAgent.indexOf('MSIE')!==-1
     || navigator.userAgent.indexOf('Safari') !== -1){
     document.body.classList.add('flexbox-support');
 }
-
-// Page specific items
-require("./pages/page-show");

resources/assets/js/vues/vues.js

@@ -16,10 +16,17 @@ let vueMapping = {
 
 window.vues = {};
 
-let ids = Object.keys(vueMapping);
-for (let i = 0, len = ids.length; i < len; i++) {
-    if (!exists(ids[i])) continue;
-    let config = vueMapping[ids[i]];
-    config.el = '#' + ids[i];
-    window.vues[ids[i]] = new Vue(config);
-}
+function load() {
+    let ids = Object.keys(vueMapping);
+    for (let i = 0, len = ids.length; i < len; i++) {
+        if (!exists(ids[i])) continue;
+        let config = vueMapping[ids[i]];
+        config.el = '#' + ids[i];
+        window.vues[ids[i]] = new Vue(config);
+    }
+}
+
+export default load;
+
+
+

resources/views/base.blade.php

@@ -10,8 +10,8 @@
     <meta charset="utf-8">
 
     <!-- Styles and Fonts -->
-    <link rel="stylesheet" href="{{ versioned_asset('css/styles.css') }}">
-    <link rel="stylesheet" media="print" href="{{ versioned_asset('css/print-styles.css') }}">
+    <link rel="stylesheet" href="{{ versioned_asset('dist/styles.css') }}">
+    <link rel="stylesheet" media="print" href="{{ versioned_asset('dist/print-styles.css') }}">
 
     <!-- Scripts -->
     <script src="{{ baseUrl('/libs/jquery/jquery.min.js?version=2.1.4') }}"></script>
@@ -82,7 +82,7 @@
         </div>
     </div>
 @yield('bottom')
-<script src="{{ versioned_asset('js/common.js') }}"></script>
+<script src="{{ versioned_asset('dist/app.js') }}"></script>
 @yield('scripts')
 </body>
 </html>

resources/views/public.blade.php

@@ -10,8 +10,8 @@
     <meta charset="utf-8">
 
     <!-- Styles and Fonts -->
-    <link rel="stylesheet" href="{{ versioned_asset('css/styles.css') }}">
-    <link rel="stylesheet" media="print" href="{{ versioned_asset('css/print-styles.css') }}">
+    <link rel="stylesheet" href="{{ versioned_asset('dist/styles.css') }}">
+    <link rel="stylesheet" media="print" href="{{ versioned_asset('dist/print-styles.css') }}">
 
     <!-- Scripts -->
     <script src="{{ baseUrl("/libs/jquery/jquery.min.js?version=2.1.4") }}"></script>
@@ -58,6 +58,6 @@
     @yield('content')
 </section>
 
-<script src="{{ versioned_asset('js/common.js') }}"></script>
+<script src="{{ versioned_asset('dist/app.js') }}"></script>
 </body>
 </html>