Rewrite webpack nodemon script in node

Re-implement nodemon as a required module so that we can
remove the superfluous config file.

.gitignore

@@ -89,6 +89,6 @@ jsdoc/
 .overcommit.yml.backup
 .projections.json
 /qa/.rakeTasks
-/webpack-dev-server.json
+webpack-dev-server.json
 /.nvimrc
 .solargraph.yml

package.json

@@ -4,7 +4,7 @@
     "check-dependencies": "scripts/frontend/check_dependencies.sh",
     "block-dependencies": "node scripts/frontend/block_dependencies.js",
     "clean": "rm -rf public/assets tmp/cache/*-loader",
-    "dev-server": "./scripts/webpack-dev-server",
+    "dev-server": "NODE_OPTIONS=\"--max-old-space-size=3584\" node scripts/frontend/webpack_dev_server.js",
     "eslint": "eslint --cache --max-warnings 0 --report-unused-disable-directives --ext .js,.vue .",
     "eslint-fix": "eslint --cache --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 .",

scripts/frontend/webpack_dev_server.js

+const nodemon = require('nodemon');
+
+const DEV_SERVER_HOST = process.env.DEV_SERVER_HOST || 'localhost';
+const DEV_SERVER_PORT = process.env.DEV_SERVER_PORT || '3808';
+const STATIC_MODE = process.env.DEV_SERVER_STATIC && process.env.DEV_SERVER_STATIC != 'false';
+const DLL_MODE = process.env.WEBPACK_VENDOR_DLL && process.env.WEBPACK_VENDOR_DLL != 'false';
+
+const baseConfig = {
+  ignoreRoot: ['.git', 'node_modules/*/'],
+  noUpdateNotifier: true,
+  signal: 'SIGTERM',
+  delay: 1000,
+};
+
+// run webpack in compile-once mode and watch for changes
+if (STATIC_MODE) {
+  nodemon({
+    exec: `rm -rf public/assets/webpack ; yarn run webpack && exec ruby -run -e httpd public/ -p ${DEV_SERVER_PORT}`,
+    watch: [
+      'config/webpack.config.js',
+      'app/assets/javascripts',
+      'ee/app/assets/javascripts',
+      // ensure we refresh when running yarn install
+      'node_modules/.yarn-integrity',
+    ],
+    ext: 'js,json,vue',
+    ...baseConfig,
+  });
+}
+
+// run webpack through webpack-dev-server, optionally compiling a DLL to reduce memory
+else {
+  let watch = ['config/webpack.config.js'];
+
+  // if utilizing the vendor DLL, we need to restart the process when dependency changes occur
+  if (DLL_MODE) {
+    watch.push(
+      'config/webpack.vendor.config.js',
+      // ensure we refresh when running yarn install
+      'node_modules/.yarn-integrity',
+      'package.json',
+      'yarn.lock',
+    );
+  }
+  nodemon({
+    exec: 'webpack-dev-server --config config/webpack.config.js',
+    watch,
+    ...baseConfig,
+  });
+}
+
+// print useful messages for nodemon events
+nodemon
+  .on('start', function() {
+    console.log(`Starting webpack webserver on http://${DEV_SERVER_HOST}:${DEV_SERVER_PORT}`);
+    if (STATIC_MODE) {
+      console.log('You are starting webpack in compile-once mode');
+      console.log('The JavaScript assets are recompiled only if they change');
+      console.log('If you change them often, you might want to unset DEV_SERVER_STATIC');
+    }
+  })
+  .on('quit', function() {
+    console.log('Shutting down webpack process');
+    process.exit();
+  })
+  .on('restart', function(files) {
+    console.log('Restarting webpack process due to: ', files);
+  });

scripts/webpack-dev-server

-#!/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 DEV_SERVER_HOST=${DEV_SERVER_HOST:=localhost}
-export DEV_SERVER_STATIC=${DEV_SERVER_STATIC:=false}
-export WEBPACK_VENDOR_DLL=${WEBPACK_VENDOR_DLL:=false}
-
-GITLAB_ROOT="$(cd "$(dirname "$0")/.." >/dev/null 2>&1 && pwd)"
-
-# Change into gitlab directory
-cd "$GITLAB_ROOT" || exit 1
-
-# 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 \
-    --config "$DIR/webpack-dev-server.json" \
-    --watch 'config/webpack.config.js' \
-    "$@"
-}
-
-# Clean up static assets that were left in the directory
-rm -rf public/assets/webpack
-
-if [[ "$DEV_SERVER_STATIC" != "false" ]]; then
-  echo "Starting webserver on http://$DEV_SERVER_HOST:$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 DEV_SERVER_STATIC"
-  echo "You can force webpack to recompile 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" \
-    --watch "node_modules/.yarn-integrity" \
-    --ext js,json,vue \
-    --exec "rm -rf public/assets/webpack ; yarn run webpack && exec ruby -run -e httpd public/ -p $DEV_SERVER_PORT"
-
-elif [[ "$WEBPACK_VENDOR_DLL" != "false" ]]; then
-  # Utilizing webpack dev server with DLLs.
-  nodemon --watch "config/webpack.vendor.config.js" \
-    --watch "node_modules/.yarn-integrity" \
-    --watch "package.json" \
-    --watch "yarn.lock" \
-    --exec "webpack-dev-server --config config/webpack.config.js"
-
-else
-  # Default case. Utilizing webpack dev server with no DLLs.
-  nodemon --exec "webpack-dev-server --config config/webpack.config.js"
-fi

scripts/webpack-dev-server.json

-{
-  "ignoreRoot": [
-    ".git",
-    "node_modules/*/"
-  ],
-  "noUpdateNotifier": true,
-  "signal": "SIGTERM",
-  "delay": 1000
-}
\ No newline at end of file