chore(webpack): Add npm run serve command

Signed-off-by: Julius Härtl <jus@bitgrid.net>

README.md

@@ -60,6 +60,14 @@ To build you will need to have [Node.js](https://nodejs.org/en/) and [Composer](
     - Watch for changes `npm run watch`
     - Production build `npm run build`
 
+### Faster frontend developing with HMR
+
+You can enable HMR (Hot module replacement) to avoid page reloads when working on the frontend:
+
+1. ☑️ Install and enable [`hmr_enabler` app](https://github.com/nextcloud/hmr_enabler)
+2. 🏁 Run `npm run serve`
+3. 🌍 Open the normal Nextcloud server URL (not the URL given by above command)
+
 ### GitHub Codespaces / VS Code devcontainer
 
 - Open code spaces or the repository in VS Code to start the dev container

package.json

@@ -20,6 +20,7 @@
 		"build": "NODE_ENV=production webpack --progress --config webpack.js",
 		"dev": "NODE_ENV=development webpack --progress --config webpack.js",
 		"watch": "NODE_ENV=development webpack --progress --watch --config webpack.js",
+		"serve": "webpack serve --node-env development --allowed-hosts all --config webpack.js",
 		"lint": "eslint --ext .js,.vue src",
 		"lint:fix": "eslint --ext .js,.vue src --fix",
 		"lint:cypress": "eslint --ext .js cypress",

webpack.js

@@ -3,6 +3,7 @@ const path = require('path')
 
 const buildMode = process.env.NODE_ENV
 const isDev = buildMode === 'development'
+const isDevServer = process.env.WEBPACK_DEV_SERVER;
 
 webpackConfig.entry = {
 	...webpackConfig.entry,
@@ -13,14 +14,17 @@ webpackConfig.entry = {
 	reference: path.join(__dirname, 'src', 'init-reference.js'),
 }
 
-webpackConfig.stats = {
+if (isDevServer) {
+	webpackConfig.output.publicPath = 'http://127.0.0.1:3000/'
+} else {
+	webpackConfig.stats = {
 		context: path.resolve(__dirname, 'src'),
 		assets: true,
 		entrypoints: true,
 		chunks: true,
 		modules: true,
+	}
 }
-
 // Workaround for https://github.com/nextcloud/webpack-vue-config/pull/432 causing problems with nextcloud-vue-collections
 webpackConfig.resolve.alias = {}