Use webpack / laravel-mix to build the Plugin Store

mix-manifest.json

@@ -0,0 +1,5 @@
+{
+    "/src/web/assets/pluginstore/dist/js/main.js": "/src/web/assets/pluginstore/dist/js/main.js",
+    "/src/web/assets/pluginstore/dist/css/main.css": "/src/web/assets/pluginstore/dist/css/main.css",
+    "/src/web/assets/pluginstore/dist/css/main.css.map": "/src/web/assets/pluginstore/dist/css/main.css.map"
+}

package.json

@@ -1,6 +1,21 @@
 {
   "private": true,
   "main": "gulpfile.js",
+  "scripts": {
+    "dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+  },
+  "dependencies": {
+    "lodash": "^4.17.4",
+    "marked": "^0.3.6",
+    "vue": "^2.4.4",
+    "vue-lodash": "^1.0.3",
+    "vue-resource": "^1.3.3",
+    "vue-router": "^2.5.3",
+    "vuex": "^2.3.1"
+  },
   "devDependencies": {
     "autoprefixer": "^7.1.4",
     "bootstrap": "3.3.* || 3.2.* || 3.1.*",
@@ -28,6 +43,7 @@
     "inputmask": "~3.2.2 || ~3.3.5",
     "jquery": "3.2.* || 3.1.* || 2.2.* || 2.1.* || 1.11.* || 1.12.*",
     "jquery.payment": "^3.0.0",
+    "laravel-mix": "^1.6.1",
     "picturefill": "^3.0.2",
     "punycode": "1.3.*",
     "selectize": "^0.12.4",

src/web/assets/pluginstore/gulpfile.js

@@ -1,22 +0,0 @@
-/*
-var elixir = require('laravel-elixir');
-
-require('laravel-elixir-vueify');
-require('laravel-elixir-browserify-official');
-
-elixir(function(mix) {
-    mix.browserify('app.js');
-});
-*/
-
-var elixir = require('laravel-elixir');
-elixir.config.publicPath = "dist";
-
-require('laravel-elixir-vue-2');
-require('laravel-elixir-webpack-official');
-
-elixir(function(mix) {
-    mix.sass('main.scss');
-    mix.webpack('main.js');
-    mix.copy('resources/assets/images', 'dist/images');
-});

src/web/assets/pluginstore/package.json

@@ -1,17 +0,0 @@
-{
-  "devDependencies": {
-    "gulp": "^3.9.1",
-    "laravel-elixir": "^6.0.0-15",
-    "laravel-elixir-vue-2": "^0.3.0",
-    "laravel-elixir-webpack-official": "^1.0.10",
-    "lodash": "^4.17.4",
-    "marked": "^0.3.6",
-    "vue": "^2.3.3",
-    "vue-lodash": "^1.0.3",
-    "vue-resource": "^1.3.3",
-    "vue-router": "^2.5.3",
-    "vuex": "^2.3.1",
-    "webpack": "^2.6.1"
-  },
-  "dependencies": {}
-}

webpack.mix.js

@@ -0,0 +1,23 @@
+let mix = require('laravel-mix');
+
+/*
+ |--------------------------------------------------------------------------
+ | Mix Asset Management
+ |--------------------------------------------------------------------------
+ |
+ | Mix provides a clean, fluent API for defining some Webpack build steps
+ | for your Laravel application. By default, we are compiling the Sass
+ | file for your application, as well as bundling up your JS files.
+ |
+ */
+
+const sourcePath = 'src/web/assets/pluginstore/resources/assets';
+const distPath = 'src/web/assets/pluginstore/dist';
+
+mix.js(sourcePath + '/js/main.js', distPath + '/js/')
+    .sass(sourcePath + '/sass/main.scss', distPath + '/css/')
+        .options({
+            processCssUrls: false
+        })
+    .copy(sourcePath + '/images', distPath + '/images/')
+    .sourceMaps();