webpack: Introduce `webpack.dev-asset.json`.

This commit will now allow development-only pages to
use development-only packages without breaking the
production build.

docs/subsystems/html-css.md

@@ -148,11 +148,11 @@ relevant background as well.
 
 Zulip's frontend is primarily JavaScript in the `static/js` directory;
 we are working on migrating these to TypeScript modules.  Stylesheets
-are written in CSS extended by various PostCSS plugins; they
+are written in CSS extended by various PostCSS plugins; they are
-are converted from plain CSS, and we have yet to take full advantage of
+converted from plain CSS, and we have yet to take full advantage of
 the features PostCSS offers.  We use Webpack to transpile and build JS
 and CSS bundles that the browser can understand, one for each entry
-points specified in `tools/webpack.assets.json`; source maps are
+points specified in `tools/webpack.*assets.json`; source maps are
 generated in the process for better debugging experience.
 
 In development mode, bundles are built and served on the fly using
@@ -165,7 +165,7 @@ ready for deployment.
 
 You can trace which source files are included in which HTML templates
 by comparing the `entrypoint` variables in the HTML templates under
-`templates/` with the bundles declared in `tools/webpack.assets.json`.
+`templates/` with the bundles declared in `tools/webpack.*assets.json`.
 
 ### Adding static files
 
@@ -196,8 +196,8 @@ first add it to the appropriate place under `static/`.
   `static/assets/icons/template.hbs` template.
 
 For your asset to be included in a development/production bundle, it
-needs to be accessible from one of the entry points defined in
+needs to be accessible from one of the entry points defined either in
-`tools/webpack.assets.json`.
+`tools/webpack.assets.json` or `tools/webpack.dev-assets.json`.
 
 * If you plan to only use the file within the app proper, and not on the login
   page or other standalone pages, put it in the `app` bundle by importing it
@@ -206,10 +206,13 @@ needs to be accessible from one of the entry points defined in
   logged-out/portico pages, import it to
   `static/js/bundles/common.js` which itself is imported to the
   `app` and `common` bundles.
-* If it's just used on a single standalone page (e.g. `/stats`),
+* If it's just used on a single standalone page which is only used in
-  create a new entry point in `tools/webpack.assets.json`. Use the
+  a development environment (e.g. `/devlogin`) create a new entry
-  `bundle` macro (defined in `templates/zerver/base.html`) in the
+  point in `tools/webpack.dev-assets.json` or it's used in both
-  relevant Jinja2 template to inject the compiled JS and CSS.
+  production and development (e.g. `/stats`) create a new entry point
+  in `tools/webpack.assets.json`. Use the `bundle` macro (defined in
+  `templates/zerver/base.html`) in the relevant Jinja2 template to
+  inject the compiled JS and CSS.
 
 If you want to test minified files in development, look for the
 `DEBUG =` line in `zproject/default_settings.py` and set it to `False`.

tools/webpack

@@ -73,7 +73,11 @@ def build_for_dev_server(host: str, port: str, minify: bool, disable_host_check:
         watch_manager = pyinotify.WatchManager()
         event_notifier = pyinotify.Notifier(watch_manager, WebpackConfigFileChangeHandler())
         # We did a chdir to the root of the Zulip checkout above.
-        for filepath in ["webpack.config.ts", "tools/webpack.assets.json"]:
+        for filepath in [
+            "webpack.config.ts",
+            "tools/webpack.assets.json",
+            "tools/webpack.dev-assets.json",
+        ]:
             watch_manager.add_watch(filepath, pyinotify.IN_MODIFY)
         event_notifier.loop()
     finally:
@@ -94,6 +98,10 @@ def build_for_most_tests() -> None:
     # clean up names.
     with open("tools/webpack.assets.json") as json_data:
         entries = json.load(json_data)
+
+    with open("tools/webpack.dev-assets.json") as json_data:
+        entries.update(json.load(json_data))
+
     stat_data = {
         "status": "done",
         "chunks": {entry: [f"{entry}-stubentry.js"] for entry in entries},

tools/webpack.assets.json

@@ -87,22 +87,8 @@
         "./static/js/analytics/support",
         "./static/styles/app_components.css"
     ],
-    "dev-login": ["./static/js/bundles/portico", "./static/js/portico/dev-login"],
     "desktop-login": ["./static/js/bundles/portico", "./static/js/portico/desktop-login"],
     "desktop-redirect": ["./static/js/bundles/portico", "./static/js/portico/desktop-redirect"],
-    "dev-integrations-panel": [
-        "./static/js/bundles/portico",
-        "./static/js/portico/integrations_dev_panel",
-        "./static/styles/portico/integrations_dev_panel.css",
-        "./static/js/reload_state",
-        "./static/js/channel"
-    ],
-    "dev-email-log": [
-        "./static/js/bundles/common",
-        "./static/js/portico/email_log",
-        "./static/js/reload_state",
-        "./static/js/channel"
-    ],
     "stats": [
         "./static/js/bundles/portico",
         "./static/styles/portico/stats.css",

tools/webpack.dev-assets.json

@@ -0,0 +1,16 @@
+{
+    "dev-login": ["./static/js/bundles/portico", "./static/js/portico/dev-login"],
+    "dev-integrations-panel": [
+        "./static/js/bundles/portico",
+        "./static/js/portico/integrations_dev_panel",
+        "./static/styles/portico/integrations_dev_panel.css",
+        "./static/js/reload_state",
+        "./static/js/channel"
+    ],
+    "dev-email-log": [
+        "./static/js/bundles/common",
+        "./static/js/portico/email_log",
+        "./static/js/reload_state",
+        "./static/js/channel"
+    ]
+}

webpack.config.ts

@@ -11,6 +11,7 @@ import BundleTracker from "webpack-bundle-tracker";
 
 import DebugRequirePlugin from "./tools/debug-require-webpack-plugin";
 import assets from "./tools/webpack.assets.json";
+import dev_assets from "./tools/webpack.dev-assets.json";
 
 const cacheLoader: webpack.RuleSetUseItem = {
     loader: "cache-loader",
@@ -29,7 +30,7 @@ export default (_env: unknown, argv: {mode?: string}): webpack.Configuration[] =
         entry: production
             ? assets
             : Object.fromEntries(
-                  Object.entries(assets).map(([name, paths]) => [
+                  Object.entries({...assets, ...dev_assets}).map(([name, paths]) => [
                       name,
                       [...paths, "./static/js/debug"],
                   ]),