Attempted move to webpack again

package.json

@@ -1,38 +1,32 @@
 {
   "private": true,
   "scripts": {
-    "build": "gulp build",
-    "production": "gulp build --production",
-    "dev": "gulp",
+    "build": "webpack",
+    "production": "NODE_ENV=production webpack",
+    "dev": "webpack --watch",
     "watch": "gulp",
     "permissions": "chown -R $USER:$USER bootstrap/cache storage public/uploads"
   },
   "devDependencies": {
-    "babelify": "^7.3.0",
-    "browserify": "^14.3.0",
-    "envify": "^4.0.0",
-    "gulp": "^3.9.1",
-    "gulp-autoprefixer": "3.1.1",
-    "gulp-clean-css": "^3.0.4",
-    "gulp-livereload": "^3.8.1",
-    "gulp-minify-css": "1.2.4",
-    "gulp-plumber": "1.1.0",
-    "gulp-sass": "3.1.0",
-    "gulp-uglify": "2.1.2",
-    "vinyl-buffer": "^1.0.0",
-    "vinyl-source-stream": "^1.1.0",
-    "watchify": "^3.9.0",
-    "yargs": "^7.1.0"
+    "@babel/core": "^7.0.0-beta.40",
+    "@babel/preset-env": "^7.0.0-beta.40",
+    "babel-loader": "^8.0.0-beta.0",
+    "babel-polyfill": "^6.26.0",
+    "css-loader": "^0.28.10",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "node-sass": "^4.7.2",
+    "sass-loader": "^6.0.7",
+    "style-loader": "^0.20.3",
+    "uglifyjs-webpack-plugin": "^1.2.3",
+    "webpack": "^4.1.1",
+    "webpack-cli": "^2.0.11",
+    "yargs": "^11.0.0"
   },
   "dependencies": {
-    "axios": "^0.16.1",
-    "babel-polyfill": "^6.23.0",
-    "babel-preset-es2015": "^6.24.1",
-    "clipboard": "^1.7.1",
+    "axios": "^0.18.0",
+    "clipboard": "^2.0.0",
     "codemirror": "^5.26.0",
-    "dropzone": "^4.0.1",
-    "gulp-sourcemaps": "^2.6.1",
-    "gulp-util": "^3.0.8",
+    "dropzone": "^5.4.0",
     "markdown-it": "^8.3.1",
     "markdown-it-task-lists": "^2.0.0",
     "moment": "^2.12.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,16 @@
-"use strict";
-require("babel-polyfill");
-require('./dom-polyfills');
+import "../sass/styles.scss"
+import "../sass/print-styles.scss"
+import "../sass/export-styles.scss"
+
+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 +47,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 +67,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
@@ -119,12 +125,11 @@ jQuery.expr[":"].contains = $.expr.createPseudo(function (arg) {
     };
 });
 
+console.log('test');
+
 // Detect IE for css
 if(navigator.userAgent.indexOf('MSIE')!==-1
     || navigator.appVersion.indexOf('Trident/') > 0
     || 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

@@ -82,7 +82,7 @@
         </div>
     </div>
 @yield('bottom')
-<script src="{{ versioned_asset('js/common.js') }}"></script>
+<script src="{{ versioned_asset('dist/bundle.js') }}"></script>
 @yield('scripts')
 </body>
 </html>

webpack.config.js

@@ -0,0 +1,64 @@
+const path = require('path');
+const dev = process.env.NODE_ENV !== 'production';
+
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+
+const extractSass = new ExtractTextPlugin({
+    filename: "[name].css"
+    // disable: process.env.NODE_ENV === "development"
+});
+
+const config = {
+    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: extractSass.extract({
+                    use: [{
+                        loader: "css-loader", options: {
+                            sourceMap: dev
+                        }
+                    }, {
+                        loader: "sass-loader", options: {
+                            sourceMap: dev
+                        }
+                    }],
+                    // use style-loader in development
+                    fallback: "style-loader"
+                })
+            }
+        ]
+    },
+    plugins: [extractSass]
+};
+
+if (dev) {
+    config['devtool'] = 'inline-source-map';
+}
+
+if (!dev) {
+    config.plugins.push(new UglifyJsPlugin());
+}
+
+module.exports = config;