web: babel-ify javascript bundle

As dynamic imports/ES6 modules have limited browser support (notably, no
support in IE or Edge), it doesn't make sense to have the Concourse UI
fail to run on these browsers.

Using webpack + babel allows us to convert this ES6 syntax to something
that will work even on older browsers.

This commit introduces a new yarn command `build-js` that compiles the
high-level ES6 module code down to older versions of javascript while
still offering some form of dynamic importing (albeit non-natively).

concourse/concourse#5131

Signed-off-by: Aidan Oldershaw <aoldershaw@pivotal.io>

package.json

@@ -6,7 +6,11 @@
   "license": "Apache-2.0",
   "dependencies": {},
   "devDependencies": {
+    "@babel/core": "^7.8.4",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/preset-env": "^7.8.4",
     "@mdi/svg": "^4.5.95",
+    "babel-loader": "^8.0.6",
     "child-process-promise": "^2.2.1",
     "clean-css-cli": "^4.3.0",
     "elm": "^0.19.1",
@@ -16,7 +20,9 @@
     "less": "^3.10.3",
     "less-plugin-autoprefix": "^2.0.0",
     "puppeteer": "^1.20.0",
-    "uglify-js": "^3.6.3"
+    "uglify-js": "^3.6.3",
+    "webpack": "^4.41.6",
+    "webpack-cli": "^3.3.11"
   },
   "resolutions": {
     "less/request": "^2.86.0"
@@ -26,6 +32,7 @@
     "analyse": "cd web/elm && elm-analyse",
     "build": "yarn run build-less && yarn run build-elm",
     "build-debug": "yarn run build-less && yarn run build-elm-debug",
+    "build-js": "webpack --mode production",
     "test": "cd web/elm && elm-test",
     "build-less": "lessc web/assets/css/main.less web/public/main.out.css && cleancss -o web/public/main.css web/public/main.out.css && rm web/public/main.out.css",
     "build-elm": "cd web/elm && elm make --optimize --output ../public/elm.js src/Main.elm && uglifyjs ../public/elm.js --compress 'pure_funcs=[F2,F3,F4,F5,F6,F7,F8,F9,A2,A3,A4,A5,A6,A7,A8,A9],pure_getters,keep_fargs=false,unsafe_comps,unsafe' | uglifyjs --mangle --output=../public/elm.min.js",

webpack.config.js

@@ -0,0 +1,25 @@
+const path = require('path')
+
+module.exports = {
+  entry: './web/public/elm-setup.js',
+  output: {
+    path: path.resolve(__dirname, 'web/public'),
+    filename: 'bundle.js',
+    publicPath: '/public/'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.m?js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env'],
+            plugins: ['@babel/plugin-syntax-dynamic-import']
+          }
+        }
+      }
+    ]
+  }
+}