webpack: Move webpack configuration to web.

Signed-off-by: Anders Kaseorg <anders@zulip.com>

.eslintrc.json

@@ -15,6 +15,7 @@
     ],
     "parser": "@babel/eslint-parser",
     "parserOptions": {
+        "requireConfigFile": false,
         "warnOnUnsupportedTypeScriptVersion": false,
         "sourceType": "unambiguous"
     },
@@ -240,7 +241,11 @@
                 "no-console": "error"
             },
             "settings": {
-                "import/resolver": "webpack"
+                "import/resolver": {
+                    "webpack": {
+                        "config": "./web/webpack.config.ts"
+                    }
+                }
             }
         },
         {

.github/workflows/production-suite.yml

@@ -8,15 +8,15 @@ on:
     paths:
       - .github/workflows/production-suite.yml
       - "**/migrations/**"
-      - babel.config.js
       - manage.py
-      - postcss.config.js
       - puppet/**
       - requirements/**
       - scripts/**
       - tools/**
+      - web/babel.config.js
+      - web/postcss.config.js
       - web/third/**
-      - webpack.config.ts
+      - web/webpack.config.ts
       - yarn.lock
       - zerver/worker/queue_processors.py
       - zerver/lib/push_notifications.py

docs/subsystems/html-css.md

@@ -271,7 +271,7 @@ webpack plugin (`web/debug-require-webpack-plugin.ts`) that exposes
 a version of the `require()` function to the development environment
 browser console for this purpose. For example, you can access our
 `people` module by evaluating
-`people = require("./web/src/people")`, or the third-party `lodash`
+`people = require("./src/people")`, or the third-party `lodash`
 module with `_ = require("lodash")`. This mechanism is **not** a
 stable API and should not be used for any purpose other than
 interactive debugging.

docs/subsystems/logging.md

@@ -200,7 +200,7 @@ new feature hard to miss.
   browser session, and includes them in reports to the server, so that
   one can see cases where exceptions chained together. You can print
   this log from the browser console using
-  `blueslip = require("./web/src/blueslip"); blueslip.get_log()`.
+  `blueslip = require("./src/blueslip"); blueslip.get_log()`.
 
 Blueslip supports several error levels:
 

tools/webpack

@@ -5,7 +5,7 @@ import os
 import subprocess
 from typing import NoReturn
 
-os.chdir(os.path.join(os.path.dirname(__file__), ".."))
+os.chdir(os.path.join(os.path.dirname(__file__), "../web"))
 
 
 def build_for_prod_or_puppeteer(quiet: bool) -> NoReturn:
@@ -15,7 +15,7 @@ def build_for_prod_or_puppeteer(quiet: bool) -> NoReturn:
     with open("/proc/meminfo") as meminfo:
         if int(next(meminfo).split()[1]) < 3 * 1024 * 1024:
             webpack_args += ["--max-old-space-size=1536"]
-    webpack_args += ["node_modules/.bin/webpack-cli", "--mode=production"]
+    webpack_args += ["../node_modules/.bin/webpack-cli", "--mode=production"]
     if quiet:
         webpack_args += ["--stats=errors-only"]
     os.execvp(webpack_args[0], webpack_args)
@@ -27,7 +27,7 @@ def build_for_dev_server(host: str, port: str, minify: bool, disable_host_check:
     # This is our most dynamic configuration, which we use for our
     # dev server.  The key piece here is that we identify changes to
     # files as devs make edits and serve new assets on the fly.
-    webpack_args = ["node", "node_modules/.bin/webpack-cli", "serve"]
+    webpack_args = ["node", "../node_modules/.bin/webpack-cli", "serve"]
     webpack_args += [
         # webpack-cli has a bug where it ignores --watch-poll with
         # multi-config, and we don't need the katex-cli part anyway.
@@ -79,8 +79,8 @@ def build_for_dev_server(host: str, port: str, minify: bool, disable_host_check:
         # We did a chdir to the root of the Zulip checkout above.
         for filepath in [
             "webpack.config.ts",
-            "web/webpack.assets.json",
-            "web/webpack.dev-assets.json",
+            "webpack.assets.json",
+            "webpack.dev-assets.json",
         ]:
             watch_manager.add_watch(filepath, pyinotify.IN_MODIFY)
         event_notifier.loop()
@@ -100,17 +100,17 @@ def build_for_most_tests() -> None:
     # configuration for ALL tests, but figuring out the full history here
     # was out of the scope of the effort here to add some comments and
     # clean up names.
-    with open("web/webpack.assets.json") as json_data:
+    with open("webpack.assets.json") as json_data:
         entries = json.load(json_data)
 
-    with open("web/webpack.dev-assets.json") as json_data:
+    with open("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},
     }
-    directory = "var"
+    directory = "../var"
     if not os.path.exists(directory):
         os.makedirs(directory)
     with open(os.path.join(directory, "webpack-stats-test.json"), "w") as outfile:

web/postcss.config.js

@@ -2,7 +2,7 @@
 
 const path = require("path");
 
-const {media_breakpoints} = require("./web/src/css_variables");
+const {media_breakpoints} = require("./src/css_variables");
 
 module.exports = ({file}) => ({
     plugins: [

web/src/debug.js

@@ -2,7 +2,7 @@
 
 // This module is included from webpack in development mode.  To access it from
 // the browser console, run:
-//   var debug = require("./web/src/debug");
+//   var debug = require("./src/debug");
 
 /*
       debug.print_elapsed_time("foo", foo)

web/tests/lib/index.js

@@ -34,7 +34,7 @@ require("@babel/register")({
         "babel-plugin-rewire-ts",
         ["@babel/plugin-transform-modules-commonjs", {lazy: () => true}],
     ],
-    root: path.resolve(__dirname, "../../.."),
+    root: path.resolve(__dirname, "../.."),
 });
 
 // Create a helper function to avoid sneaky delays in tests.

web/webpack.assets.json

@@ -1,89 +1,86 @@
 {
     "activity": [
-        "./web/src/bundles/common",
+        "./src/bundles/common",
         "sorttable",
-        "./web/src/analytics/activity",
-        "./web/styles/portico/activity.css"
+        "./src/analytics/activity",
+        "./styles/portico/activity.css"
     ],
     "billing": [
-        "./web/src/bundles/portico",
-        "./web/src/portico/landing-page",
-        "./web/styles/portico/landing_page.css",
-        "./web/src/billing/helpers",
-        "./web/src/billing/billing",
-        "./web/src/templates",
-        "./web/src/loading",
-        "./web/styles/portico/billing.css"
+        "./src/bundles/portico",
+        "./src/portico/landing-page",
+        "./styles/portico/landing_page.css",
+        "./src/billing/helpers",
+        "./src/billing/billing",
+        "./src/templates",
+        "./src/loading",
+        "./styles/portico/billing.css"
     ],
     "upgrade": [
-        "./web/src/bundles/portico",
-        "./web/src/portico/tippyjs",
-        "./web/src/portico/landing-page",
-        "./web/styles/portico/landing_page.css",
-        "./web/src/billing/helpers",
-        "./web/src/billing/upgrade",
-        "./web/src/templates",
-        "./web/src/loading",
-        "./web/styles/portico/billing.css"
+        "./src/bundles/portico",
+        "./src/portico/tippyjs",
+        "./src/portico/landing-page",
+        "./styles/portico/landing_page.css",
+        "./src/billing/helpers",
+        "./src/billing/upgrade",
+        "./src/templates",
+        "./src/loading",
+        "./styles/portico/billing.css"
     ],
     "billing-event-status": [
-        "./web/src/bundles/portico",
-        "./web/styles/portico/landing_page.css",
-        "./web/src/billing/event_status.js",
-        "./web/src/billing/helpers",
-        "./web/styles/portico/billing.css"
+        "./src/bundles/portico",
+        "./styles/portico/landing_page.css",
+        "./src/billing/event_status.js",
+        "./src/billing/helpers",
+        "./styles/portico/billing.css"
     ],
-    "portico": ["./web/src/bundles/portico"],
-    "error-styles": [
-        "./web/third/bootstrap/css/bootstrap.css",
-        "./web/styles/portico/portico_styles.css"
-    ],
-    "common": ["./web/src/bundles/common"],
+    "portico": ["./src/bundles/portico"],
+    "error-styles": ["./third/bootstrap/css/bootstrap.css", "./styles/portico/portico_styles.css"],
+    "common": ["./src/bundles/common"],
     "help": [
-        "./web/src/bundles/portico",
+        "./src/bundles/portico",
         "simplebar/dist/simplebar.css",
         "simplebar",
-        "./web/src/portico/help",
-        "./web/src/portico/tabbed-instructions"
+        "./src/portico/help",
+        "./src/portico/tabbed-instructions"
     ],
     "landing-page": [
-        "./web/src/bundles/portico",
-        "./web/src/portico/landing-page",
-        "./web/styles/portico/landing_page.css"
+        "./src/bundles/portico",
+        "./src/portico/landing-page",
+        "./styles/portico/landing_page.css"
     ],
     "integrations": [
-        "./web/src/bundles/portico",
-        "./web/src/portico/integrations",
-        "./web/styles/portico/landing_page.css",
-        "./web/styles/portico/integrations.css"
+        "./src/bundles/portico",
+        "./src/portico/integrations",
+        "./styles/portico/landing_page.css",
+        "./styles/portico/integrations.css"
     ],
     "communities": [
-        "./web/src/bundles/portico",
-        "./web/src/portico/communities",
-        "./web/styles/portico/landing_page.css",
-        "./web/styles/portico/integrations.css"
+        "./src/bundles/portico",
+        "./src/portico/communities",
+        "./styles/portico/landing_page.css",
+        "./styles/portico/integrations.css"
     ],
-    "signup": ["./web/src/bundles/portico", "jquery-validation", "./web/src/portico/signup"],
-    "register": ["./web/src/bundles/portico", "jquery-validation", "./web/src/portico/signup"],
+    "signup": ["./src/bundles/portico", "jquery-validation", "./src/portico/signup"],
+    "register": ["./src/bundles/portico", "jquery-validation", "./src/portico/signup"],
     "confirm-preregistrationuser": [
-        "./web/src/bundles/common",
-        "./web/src/portico/confirm-preregistrationuser"
+        "./src/bundles/common",
+        "./src/portico/confirm-preregistrationuser"
     ],
     "support": [
-        "./web/src/bundles/common",
+        "./src/bundles/common",
         "sorttable",
-        "./web/src/analytics/activity",
-        "./web/styles/portico/activity.css",
-        "./web/src/analytics/support"
+        "./src/analytics/activity",
+        "./styles/portico/activity.css",
+        "./src/analytics/support"
     ],
-    "desktop-login": ["./web/src/bundles/portico", "./web/src/portico/desktop-login"],
-    "desktop-redirect": ["./web/src/bundles/portico", "./web/src/portico/desktop-redirect"],
+    "desktop-login": ["./src/bundles/portico", "./src/portico/desktop-login"],
+    "desktop-redirect": ["./src/bundles/portico", "./src/portico/desktop-redirect"],
     "stats": [
-        "./web/src/bundles/portico",
-        "./web/styles/portico/stats.css",
-        "./web/src/stats/stats",
+        "./src/bundles/portico",
+        "./styles/portico/stats.css",
+        "./src/stats/stats",
         "tippy.js/dist/tippy.css"
     ],
-    "app": ["./web/src/bundles/app"],
-    "digest": ["./web/src/bundles/portico"]
+    "app": ["./src/bundles/app"],
+    "digest": ["./src/bundles/portico"]
 }

web/webpack.config.ts

@@ -8,9 +8,9 @@ import MiniCssExtractPlugin from "mini-css-extract-plugin";
 import type webpack from "webpack";
 import BundleTracker from "webpack-bundle-tracker";
 
-import DebugRequirePlugin from "./web/debug-require-webpack-plugin";
-import assets from "./web/webpack.assets.json";
-import dev_assets from "./web/webpack.dev-assets.json";
+import DebugRequirePlugin from "./debug-require-webpack-plugin";
+import assets from "./webpack.assets.json";
+import dev_assets from "./webpack.dev-assets.json";
 
 export default (env: {minimize?: boolean} = {}, argv: {mode?: string}): webpack.Configuration[] => {
     const production: boolean = argv.mode === "production";
@@ -37,18 +37,18 @@ export default (env: {minimize?: boolean} = {}, argv: {mode?: string}): webpack.
             : Object.fromEntries(
                   Object.entries({...assets, ...dev_assets}).map(([name, paths]) => [
                       name,
-                      [...paths, "./web/src/debug"],
+                      [...paths, "./src/debug"],
                   ]),
               ),
         module: {
             rules: [
                 {
-                    test: require.resolve("./web/src/zulip_test"),
+                    test: require.resolve("./src/zulip_test"),
                     loader: "expose-loader",
                     options: {exposes: "zulip_test"},
                 },
                 {
-                    test: require.resolve("./web/debug-require"),
+                    test: require.resolve("./debug-require"),
                     loader: "expose-loader",
                     options: {exposes: "require"},
                 },
@@ -83,15 +83,15 @@ export default (env: {minimize?: boolean} = {}, argv: {mode?: string}): webpack.
                 {
                     test: /\.(js|ts)$/,
                     include: [
-                        path.resolve(__dirname, "web/shared/src"),
-                        path.resolve(__dirname, "web/src"),
+                        path.resolve(__dirname, "shared/src"),
+                        path.resolve(__dirname, "src"),
                     ],
                     loader: "babel-loader",
                 },
                 // regular css files
                 {
                     test: /\.css$/,
-                    exclude: path.resolve(__dirname, "web/styles"),
+                    exclude: path.resolve(__dirname, "styles"),
                     use: [
                         MiniCssExtractPlugin.loader,
                         {
@@ -105,7 +105,7 @@ export default (env: {minimize?: boolean} = {}, argv: {mode?: string}): webpack.
                 // PostCSS loader
                 {
                     test: /\.css$/,
-                    include: path.resolve(__dirname, "web/styles"),
+                    include: path.resolve(__dirname, "styles"),
                     use: [
                         MiniCssExtractPlugin.loader,
                         {
@@ -160,7 +160,7 @@ export default (env: {minimize?: boolean} = {}, argv: {mode?: string}): webpack.
             ],
         },
         output: {
-            path: path.resolve(__dirname, "static/webpack-bundles"),
+            path: path.resolve(__dirname, "../static/webpack-bundles"),
             publicPath: "",
             filename: production ? "[name].[contenthash].js" : "[name].js",
             assetModuleFilename: production
@@ -197,8 +197,8 @@ export default (env: {minimize?: boolean} = {}, argv: {mode?: string}): webpack.
             new DebugRequirePlugin(),
             new BundleTracker({
                 filename: production
-                    ? "webpack-stats-production.json"
-                    : "var/webpack-stats-dev.json",
+                    ? "../webpack-stats-production.json"
+                    : "../var/webpack-stats-dev.json",
             }),
             // Extract CSS from files
             new MiniCssExtractPlugin({
@@ -207,7 +207,7 @@ export default (env: {minimize?: boolean} = {}, argv: {mode?: string}): webpack.
             }),
             new HtmlWebpackPlugin({
                 filename: "5xx.html",
-                template: "web/html/5xx.html",
+                template: "html/5xx.html",
                 chunks: ["error-styles"],
             }),
         ],
@@ -247,7 +247,7 @@ export default (env: {minimize?: boolean} = {}, argv: {mode?: string}): webpack.
             "katex-cli": "shebang-loader!katex/cli",
         },
         output: {
-            path: path.resolve(__dirname, "static/webpack-bundles"),
+            path: path.resolve(__dirname, "../static/webpack-bundles"),
         },
     };
 

web/webpack.dev-assets.json

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