Streamline webpack with all other apps

Signed-off-by: Joas Schilling <coding@schilljs.com>

Makefile

@@ -5,12 +5,14 @@ build_dir=$(CURDIR)/build
 source_dir=$(build_dir)/$(app_name)
 sign_dir=$(build_dir)/sign
 
-all: package
+all: dev-setup build-js-production
 
-dev-setup: clean npm-update build-js
+dev-setup: clean clean-dev npm-init
+
+npm-init:
+	npm install
 
 npm-update:
-	rm -rf node_modules
 	npm update
 
 build-js:
@@ -19,10 +21,18 @@ build-js:
 build-js-production:
 	npm run build
 
+watch-js:
+	npm run watch
+
 clean:
+	rm -f js/notifications.js
+	rm -f js/notifications.js.map
 	rm -rf $(build_dir)
 
-package: clean build-js-production
+clean-dev:
+	rm -rf node_modules
+
+package: dev-setup build-js-production
 	mkdir -p $(source_dir)
 	rsync -a \
 	--exclude=/build \

js-src/webpack.common.js

@@ -0,0 +1,42 @@
+const path = require('path');
+const { VueLoaderPlugin } = require('vue-loader');
+
+module.exports = {
+	entry:  path.join(__dirname, 'init.js'),
+	output: {
+		path: path.resolve(__dirname, '../js'),
+		publicPath: '/js/',
+		filename: 'notifications.js'
+	},
+	module: {
+		rules: [
+			{
+				test: /\.css$/,
+				use: ['vue-style-loader', 'css-loader']
+			},
+			{
+				test: /\.vue$/,
+				loader: 'vue-loader'
+			},
+			{
+				test: /\.js$/,
+				loader: 'babel-loader',
+				exclude: /node_modules/
+			},
+			{
+				test: /\.(png|jpg|gif|svg)$/,
+				loader: 'file-loader',
+				options: {
+					name: '[name].[ext]?[hash]'
+				}
+			}
+		]
+	},
+	plugins: [new VueLoaderPlugin()],
+	resolve: {
+		alias: {
+			vue$: 'vue/dist/vue.esm.js'
+		},
+		extensions: ['*', '.js', '.vue', '.json']
+	}
+};

js-src/webpack.dev.js

@@ -0,0 +1,12 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+  mode: 'development',
+  devServer: {
+    historyApiFallback: true,
+    noInfo: true,
+    overlay: true
+  },
+  devtool: '#eval-source-map',
+});

js-src/webpack.prod.js

@@ -0,0 +1,7 @@
+const merge = require('webpack-merge')
+const common = require('./webpack.common.js')
+
+module.exports = merge(common, {
+  mode: 'production',
+  devtool: '#source-map'
+});

lib/AppInfo/Application.php

@@ -75,7 +75,7 @@ protected function registerUserInterface() {
 			&& strpos($request->getPathInfo(), '/login/') !== 0
 			&& substr($request->getScriptName(), 0 - \strlen('/index.php')) === '/index.php') {
 
-			Util::addScript('notifications', 'merged');
+			Util::addScript('notifications', 'notifications');
 			Util::addStyle('notifications', 'styles');
 		}
 	}