Merge branch 'webpack-2018'

package.json

@@ -1,38 +1,37 @@
 {
   "private": true,
   "scripts": {
-    "build": "gulp build",
+    "build": "webpack",
-    "production": "gulp build --production",
+    "production": "NODE_ENV=production webpack && rm -f ./public/dist/*styles.js",
-    "dev": "gulp",
+    "dev": "npm-run-all --parallel watch livereload",
-    "watch": "gulp",
+    "watch": "webpack --watch",
+    "livereload": "livereload ./public/dist/",
     "permissions": "chown -R $USER:$USER bootstrap/cache storage public/uploads"
   },
   "devDependencies": {
-    "babelify": "^7.3.0",
+    "@babel/core": "^7.0.0-beta.40",
-    "babel-polyfill": "^6.23.0",
+    "@babel/preset-env": "^7.0.0-beta.40",
-    "babel-preset-es2015": "^6.24.1",
+    "babel-loader": "^8.0.0-beta.0",
-    "browserify": "^14.3.0",
+    "babel-polyfill": "^6.26.0",
-    "envify": "^4.0.0",
+    "autoprefixer": "^8.1.0",
-    "gulp": "^3.9.1",
+    "css-loader": "^0.28.10",
-    "gulp-autoprefixer": "3.1.1",
+    "extract-loader": "^1.0.2",
-    "gulp-clean-css": "^3.0.4",
+    "file-loader": "^1.1.11",
-    "gulp-livereload": "^3.8.1",
+    "livereload": "^0.7.0",
-    "gulp-minify-css": "1.2.4",
+    "node-sass": "^4.7.2",
-    "gulp-plumber": "1.1.0",
+    "npm-run-all": "^4.1.2",
-    "gulp-sass": "3.1.0",
+    "postcss-loader": "^2.1.1",
-    "gulp-sourcemaps": "^2.6.1",
+    "sass-loader": "^6.0.7",
-    "gulp-uglify": "2.1.2",
+    "style-loader": "^0.20.3",
-    "gulp-util": "^3.0.8",
+    "uglifyjs-webpack-plugin": "^1.2.3",
-    "vinyl-buffer": "^1.0.0",
+    "webpack": "^4.1.1",
-    "vinyl-source-stream": "^1.1.0",
+    "webpack-cli": "^2.0.11"
-    "watchify": "^3.9.0",
-    "yargs": "^7.1.0"
   },
   "dependencies": {
-    "axios": "^0.16.1",
+    "axios": "^0.18.0",
-    "clipboard": "^1.7.1",
+    "clipboard": "^2.0.0",
     "codemirror": "^5.26.0",
-    "dropzone": "^4.0.1",
+    "dropzone": "^5.4.0",
     "markdown-it": "^8.3.1",
     "markdown-it-task-lists": "^2.0.0",
     "moment": "^2.21.0",

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";
+import "babel-polyfill"
-require("babel-polyfill");
+import "./dom-polyfills"
-require('./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);
 
-
+// Load vues and components
-require("./vues/vues");
+vues();
-require("./components");
+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);
+function load() {
-for (let i = 0, len = ids.length; i < len; i++) {
+    let ids = Object.keys(vueMapping);
-    if (!exists(ids[i])) continue;
+    for (let i = 0, len = ids.length; i < len; i++) {
-    let config = vueMapping[ids[i]];
+        if (!exists(ids[i])) continue;
-    config.el = '#' + ids[i];
+        let config = vueMapping[ids[i]];
-    window.vues[ids[i]] = new Vue(config);
+        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" href="{{ versioned_asset('dist/styles.css') }}">
-    <link rel="stylesheet" media="print" href="{{ versioned_asset('css/print-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" href="{{ versioned_asset('dist/styles.css') }}">
-    <link rel="stylesheet" media="print" href="{{ versioned_asset('css/print-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>

webpack.config.js

@@ -0,0 +1,76 @@
+const path = require('path');
+const dev = process.env.NODE_ENV !== 'production';
+
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+
+const config = {
+    mode: dev? 'development' : 'production',
+    entry: {
+        app: './resources/assets/js/index.js',
+        styles: './resources/assets/sass/styles.scss',
+        "export-styles": './resources/assets/sass/export-styles.scss',
+        "print-styles": './resources/assets/sass/print-styles.scss',
+    },
+    output: {
+        filename: '[name].js',
+        path: path.resolve(__dirname, 'public/dist')
+    },
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                exclude: /(node_modules)/,
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        presets: ['@babel/preset-env']
+                    }
+                }
+            },
+            {
+                test: /\.scss$/,
+                use: [{
+                    loader: 'file-loader',
+                    options: {
+                        name: '[name].css',
+                        context: './src/css/',
+                        outputPath: './',
+                        publicPath: 'public/'
+                    }
+                }, {
+                    loader: 'extract-loader', options: {
+                        publicPath: '',
+                    }
+                }, {
+                    loader: "css-loader", options: {
+                        sourceMap: dev
+                    }
+                }, {
+                    loader: 'postcss-loader',
+                    options: {
+                        ident: 'postcss',
+                        sourceMap: dev,
+                        plugins: (loader) => [
+                            require('autoprefixer')(),
+                        ]
+                    }
+                }, {
+                    loader: "sass-loader", options: {
+                        sourceMap: dev
+                    }
+                }]
+            }
+        ]
+    },
+    plugins: []
+};
+
+if (dev) {
+    config['devtool'] = 'inline-source-map';
+}
+
+if (!dev) {
+    config.plugins.push(new UglifyJsPlugin());
+}
+
+module.exports = config;