Separate release and dev builds of the online editor

Let `npm run build` do a release build and `npm run start` be used for
development.

tools/online_editor/package.json

@@ -4,8 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "rimraf dist && webpack-dev-server --open -d",
-    "build": "rimraf dist pkg && webpack"
+    "start": "rimraf dist && webpack-dev-server --open --config webpack.dev.js -d",
+    "build": "rimraf dist pkg && webpack --config webpack.prod.js"
   },
   "keywords": [],
   "author": "",
@@ -26,6 +26,7 @@
     "typescript": "^4.0.3",
     "webpack": "^4.44.2",
     "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0"
+    "webpack-dev-server": "^3.11.0",
+    "webpack-merge": "^5.1.4"
   }
 }

tools/online_editor/webpack.common.js

@@ -4,7 +4,6 @@ const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
 const dist = path.resolve(__dirname, "dist");
 
 module.exports = {
-    mode: 'development',
     entry: {
         app: './index.ts',
         'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
@@ -47,4 +46,4 @@ module.exports = {
             crateDirectory: path.resolve(__dirname, "../../api/sixtyfps-wasm-interpreter/"),
         }),
     ]
-};
+};

tools/online_editor/webpack.dev.js

@@ -0,0 +1,10 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+    mode: 'development',
+    devtool: 'inline-source-map',
+    devServer: {
+        contentBase: './dist',
+    },
+});

tools/online_editor/webpack.prod.js

@@ -0,0 +1,6 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+    mode: 'production',
+});