webpack v4 support

frontend/package.json

@@ -6,14 +6,14 @@
   "author": "Ave Ozkal <avezone@ave.zone>",
   "license": "MIT",
   "scripts": {
-    "start": "webpack-dev-server --port 8081 --compress --watch --cache --open",
-    "build:production": "NODE_ENV=production webpack",
-    "build:dev": "NODE_ENV=dev webpack"
+    "start": "webpack-dev-server --port 8081 --compress --watch --cache --open --mode development",
+    "build:production": "NODE_ENV=production webpack --mode production",
+    "build:dev": "NODE_ENV=dev webpack --mode development"
   },
   "private": true,
   "dependencies": {
     "bootstrap": "4",
-    "clipboard": "^1.7.1",
+    "clipboard": "^2.0.0",
     "file-size": "^1.0.0",
     "highlightjs": "^9.10.0",
     "jquery": "^3.3.1",
@@ -22,6 +22,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-beta.39",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0-beta.40",
     "@babel/preset-env": "^7.0.0-beta.39",
     "babel-loader": "8.0.0-beta.0",
     "babel-minify-webpack-plugin": "^0.3.0",
@@ -30,16 +31,17 @@
     "clean-webpack-plugin": "^0.1.18",
     "css-loader": "^0.28.9",
     "eslint": "^4.17.0",
-    "extract-text-webpack-plugin": "^3.0.2",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "^1.1.6",
-    "html-webpack-plugin": "^2.30.1",
+    "html-webpack-plugin": "^3.0.6",
     "html-webpack-template-pug": "^1.1.1",
     "node-sass": "^4.7.2",
     "pug": "^2.0.0-rc.4",
-    "pug-loader": "^2.3.0",
+    "pug-loader": "https://github.com/pugjs/pug-loader/tarball/master",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.20.1",
-    "webpack": "^3.10.0",
-    "webpack-dev-server": "^2.9.7"
+    "webpack": "4",
+    "webpack-cli": "^2.0.11",
+    "webpack-dev-server": "^3.1.1"
   }
 }

frontend/src/token.js

 import "./token.scss";
 import uploaders from "./uploaders.js";
+import "highlightjs/styles/solarized-light.css";
 
 window.addEventListener("load", async function() {
   const token = window.location.hash.substring(1);
   document.getElementById("token").innerText = token;
   const kshareConfig = uploaders.kshareConfig(token);
   const sharexConfig = uploaders.sharexConfig(token);
-  const elixireManager = uploaders.elixireManager(token);
 
   document.getElementById("kshare-config").innerText = kshareConfig;
   document.getElementById("sharex-config").innerText = sharexConfig;
-  highlight.highlightBlock(document.getElementById("sharex-config"));
-  highlight.highlightBlock(document.getElementById("kshare-config"));
 
   const kshareDl = document.getElementById("kshare-dl");
   kshareDl.href = URL.createObjectURL(
@@ -23,9 +21,18 @@ window.addEventListener("load", async function() {
     new Blob([sharexConfig], { type: "application/json" })
   );
   sharexDl.download = "elixire.sxcu";
-  const elixireManagerDl = document.getElementById("elixire-manager-dl");
-  elixireManagerDl.href = URL.createObjectURL(
-    new Blob([elixireManager], { type: "application/json" })
-  );
-  elixireManagerDl.download = "elixiremanager.sh";
+  // This way we can still await the highlight deps
+  window.profilePromise.then(() => {
+    const elixireManager = uploaders.elixireManager(token);
+    const elixireManagerDl = document.getElementById("elixire-manager-dl");
+    elixireManagerDl.href = URL.createObjectURL(
+      new Blob([elixireManager], { type: "application/json" })
+    );
+    elixireManagerDl.download = "elixiremanager.sh";
+  });
+
+  const highlight = await import("highlightjs/highlight.pack.js");
+  highlight.highlightBlock(document.getElementById("sharex-config"));
+  highlight.highlightBlock(document.getElementById("kshare-config"));
+  console.log("highlighted!");
 });

frontend/webpack.config.js

@@ -32,8 +32,7 @@ const pageList = [
   },
   {
     title: "New Token | Elixire",
-    chunkName: "token",
-    chunks: ["highlight", "highlightTheme"]
+    chunkName: "token"
   },
   {
     title: "About Us | Elixire",
@@ -63,8 +62,6 @@ module.exports = {
     account: `${SRC_DIR}/account.js`,
     logout: `${SRC_DIR}/logout.js`,
     token: `${SRC_DIR}/token.js`,
-    highlight: `${SRC_DIR}/highlight.js`,
-    highlightTheme: `${SRC_DIR}/highlightTheme.js`,
     theme: `${SRC_DIR}/theme.js`,
     bootstrapJs: "bootstrap",
     themeCSS: `${SRC_DIR}/themeCSS.js`,
@@ -130,7 +127,8 @@ module.exports = {
         loader: "babel-loader",
         options: {
           babelrc: false,
-          presets: ["@babel/preset-env"]
+          presets: ["@babel/preset-env"],
+          plugins: ["@babel/plugin-syntax-dynamic-import"]
         }
       },
       {
@@ -145,7 +143,8 @@ module.exports = {
       },
       {
         test: /\.pug$/,
-        use: ["pug-loader"],
+        loader: "pug-loader",
+        query: {},
         exclude: /node_modules/
       },
       {