diff --git a/docs/subsystems/html-css.md b/docs/subsystems/html-css.md
index 032d680299..86e9cc0fc1 100644
--- a/docs/subsystems/html-css.md
+++ b/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 converted from plain CSS, and we have yet to take full advantage of
+are written in CSS extended by various PostCSS plugins; they are
+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
-`tools/webpack.assets.json`.
+needs to be accessible from one of the entry points defined either in
+`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`),
- 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 it's just used on a single standalone page which is only used in
+ a development environment (e.g. `/devlogin`) create a new entry
+ point in `tools/webpack.dev-assets.json` or it's used in both
+ 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`.
diff --git a/tools/webpack b/tools/webpack
index d4e2073d03..2e95f468c1 100755
--- a/tools/webpack
+++ b/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},
diff --git a/tools/webpack.assets.json b/tools/webpack.assets.json
index 5883c59ff8..686e7ed4f0 100644
--- a/tools/webpack.assets.json
+++ b/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",
diff --git a/tools/webpack.dev-assets.json b/tools/webpack.dev-assets.json
new file mode 100644
index 0000000000..1dfffdf2df
--- /dev/null
+++ b/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"
+ ]
+}
diff --git a/webpack.config.ts b/webpack.config.ts
index dd0bc1bf9a..5bb5c0ad37 100644
--- a/webpack.config.ts
+++ b/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"],
]),