Development: Option to compile webpack onceleipert-webpack-compile-once

Currently during development we start the webpack dev server in order to
serve compiled assets, watch for changes in the source and recompiling.
This enables frontend developers to see changes they make quickly.

This however consumes a lot of memory, as all files are kept in memory.
For developers who are not interested in having these features, this
memory is just wasted.

This extends our webpack asset logic a bit.

Per default, the webpack-dev-server will behave like it does currently.

If you set the environment variable `WEBPACK_COMPILE_ONCE=true`, the
following will be done:

1. webpack compiles the assets and saves them at `public/assets`
2. a simple ruby http static file server will serve them like
   webpack-dev-server and integrate with webpack-rails
3. nodemon (our process monitoring) will watch
   `(ee/)?app/assets/javascripts` for changes and go to step 1 if some
   happen, for example when changing or pulling the branch.

The first step will consume a lot of memory for a few seconds (around
20 currently), but then the static file server consumes way less. So
unless you change JavaScript files, this should improve memory
consumption by at least 800 MegaBytes.

2 files changed, 48 insertions, 1 deletions

diff --git a/config/webpack.server.sh b/config/webpack.server.sh
new file mode 100755
index 00000000000..d99e10d9292
--- /dev/null
+++ b/config/webpack.server.sh
@@ -0,0 +1,47 @@
+#!/usr/bin/env bash
+
+export NODE_ENV=development
+export NODE_OPTIONS="--max-old-space-size=3584"
+export DEV_SERVER_PORT=${DEV_SERVER_PORT:=3808}
+export WEBPACK_COMPILE_ONCE=${WEBPACK_COMPILE_ONCE:=false}
+
+# Common function for nodemon, which calls the executable from node_modules, as
+# `yarn run` creates one more intermediate process noone needs.
+#
+# We replace this bash script's process with the nodemon one's with the help of exec
+#
+# We ignore nodemons update check
+#
+# Watching for changes on config/webpack.config.js
+# If we change the webpack config, we restart the process.
+#
+# We define SIGTERM as the signal for killing processes created by nodemon
+function nodemon {
+  exec node_modules/.bin/nodemon \
+    --no-update-notifier \
+    --watch 'config/webpack.config.js' \
+    --signal SIGTERM "$@"
+}
+
+if [ "$WEBPACK_COMPILE_ONCE" == "true" ]; then
+  echo "Starting webserver on http://localhost:$DEV_SERVER_PORT"
+  echo "You are starting webpack in compile-once mode"
+  echo "The JavaScript assets are recompiled only if they change"
+  echo "If you change them often, you might wanna unset WEBPACK_COMPILE_ONCE"
+  echo "You can enforce recompiling by running \`pgrep -f nodemon | xargs kill -USR2\`"
+  
+  # We only compile once at the start and serve the assets with a static file server
+  #
+  # In order to make branch switches or updates a bit more convienent, we watch for
+  # changes in the source folders in order to recompile the assets
+  nodemon --watch "app/assets/javascripts" \
+    --watch "ee/app/assets/javascripts" \
+    --ext js,json,vue \
+    --delay 1 \
+    --exec "yarn run webpack &&
+        exec ruby -run -e httpd public/ -p $DEV_SERVER_PORT"
+else
+  # Default case. Utilizing Webpack dev server.
+  # It's quite memory expensive, but does hot reloading, recompiling and watching for us
+  nodemon --exec "webpack-dev-server --config config/webpack.config.js"
+fi
\ No newline at end of file
diff --git a/package.json b/package.json
index e645eb8ed1c..b0325f5eb41 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "scripts": {
     "check-dependencies": "yarn check --integrity",
     "clean": "rm -rf public/assets tmp/cache/*-loader",
-    "dev-server": "NODE_OPTIONS=\"--max-old-space-size=3584\" nodemon -w 'config/webpack.config.js' --exec 'webpack-dev-server --config config/webpack.config.js'",
+    "dev-server": "./config/webpack.server.sh",
     "eslint": "eslint --max-warnings 0 --report-unused-disable-directives --ext .js,.vue .",
     "eslint-fix": "eslint --max-warnings 0 --report-unused-disable-directives --ext .js,.vue --fix .",
     "eslint-report": "eslint --max-warnings 0 --ext .js,.vue --format html --output-file ./eslint-report.html --no-inline-config .",