Update webpack configuration (#1332)

Separate webpack asset compilation from running the server. In development, this now requires running yarn watch to run webpack in watch mode; in production, yarn build will build the assets for production.

Other changes:

- Remove webpack-dev-server dependency since we weren't using it
- Remove the few remaining external CDN dependencies for CSS files (bootstrap and leaflet), instead bundling them using webpack.

Author: david-yz-liu

.babelrc

@@ -4,7 +4,7 @@
       "@babel/preset-env",
       {
         "useBuiltIns": "usage",
-        "corejs": 3
+        "corejs": { "version": "3.30", "proposals": true }
       }
     ],
     "@babel/preset-react"

.gitignore

@@ -52,6 +52,13 @@ cabal.sandbox.config
 /public/js/generate/app.js
 /public/js/graph/app.js
 /public/js/draw/app.js
+/public/*.svg
+/public/*.png
+/public/*.ttf
+/public/*.eot
+/public/*.woff
+/public/*.png
+/public/*.woff2
 
 # coverage directory used by tools like istanbul and jest --coverage
 coverage

.pnp.cjs

@@ -22,8 +22,7 @@ module Config (
     winterStartDate,
     winterEndDate,
     outDay,
-    holidays,
-    enableCdn
+    holidays
     ) where
 
 import Data.Text (Text)
@@ -122,9 +121,3 @@ holidays = ["20221010T", "20221107T", "20221108T",
             "20221109T", "20221110T", "20221111T",
             "20230220T", "20230221T", "20230222T",
             "20200223T", "20230224T"]
-
--- SCRIPT DEPENDENCIES CONFIGURATION
-
--- | Enable CDN downloads for js and css dependencies. Should be true on the production server.
-enableCdn :: Bool
-enableCdn = True

.yarn/cache/@leichtgewicht-ip-codec-npm-2.0.4-dd4d657af8-468de1f04d.zip

@@ -17,7 +17,7 @@ import System.IO (hPutStrLn, stderr)
 
 -- internal dependencies
 import Database.Database (setupDatabase)
-import Server (runServer, webpackProcess, webpackProductionProcess)
+import Server (runServer)
 import Svg.Parser (parsePrebuiltSvgs)
 import Util.Documentation (generateDocs)
 
@@ -27,8 +27,7 @@ import DynamicGraphs.WriteRunDot (generatePrereqsForCourses)
 -- | A map of command-line arguments to their corresponding IO actions.
 taskMap :: Map.Map String ([String] -> IO ())
 taskMap = Map.fromList [
-    ("server", const $ runServer webpackProcess),
-    ("prod-server", const $ runServer webpackProductionProcess),
+    ("server", const runServer),
     ("database", const setupDatabase),
     ("graphs", const parsePrebuiltSvgs),
     ("docs", const generateDocs),

.yarn/cache/@types-body-parser-npm-1.19.2-f845b7b538-e17840c7d7.zip

@@ -1,7 +1,6 @@
 module MasterTemplate
     (masterTemplate, header) where
 
-import Config (enableCdn)
 import qualified Data.Text as T
 import Text.Blaze ((!))
 import qualified Text.Blaze.Html5 as H
@@ -19,13 +18,8 @@ masterTemplate title headers body scripts =
             H.title (H.toHtml title)
             H.link ! A.rel "icon" ! A.type_ "image/png"
                    ! A.href "/static/res/ico/favicon.png"
-            H.link ! A.rel "stylesheet" ! A.href "https://unpkg.com/[email protected]/dist/leaflet.css"
             sequence_ headers
-            mapM_ toStylesheet [
-                if enableCdn
-                then "//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"
-                else "/static/style/bootstrap.min.3.1.1.css",
-                "/static/style/app.css"]
+            toStylesheet "/static/style/app.css"
         H.body $ do
             body
             scripts

.yarn/cache/@types-bonjour-npm-3.5.10-2862bada55-bfcadb042a.zip

@@ -15,9 +15,7 @@ notFoundResponse =
             H.title "Courseography - 404!"
             H.meta ! A.httpEquiv "Content-Type"
                    ! A.content "text/html;charset=utf-8"
-            mapM_ toStylesheet [
-                "//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css",
-                "/static/style/app.css"]
+            toStylesheet "/static/style/app.css"
 
         H.body notFoundContent
 

.yarn/cache/@types-connect-history-api-fallback-npm-1.3.5-a53af77794-464d06e5ab.zip

@@ -7,7 +7,7 @@ It also defines all of the allowed server routes, and the corresponding
 responses.
 -}
 module Server
-    (runServer, webpackProcess, webpackProductionProcess) where
+    (runServer) where
 
 import Config (markdownPath, serverConf)
 import Control.Concurrent (forkIO, killThread)
@@ -19,17 +19,10 @@ import Routes (routeResponses)
 import System.Directory (getCurrentDirectory)
 import System.IO (BufferMode (LineBuffering), hSetBuffering, stderr, stdout)
 import System.Log.Logger (Priority (INFO), rootLoggerName, setLevel, updateGlobalLogger)
-import System.Process (CreateProcess, createProcess, shell)
 
-webpackProcess :: CreateProcess
-webpackProcess = shell "yarn run watch"
 
-webpackProductionProcess :: CreateProcess
-webpackProductionProcess = shell "yarn run build"
-
-runServer :: CreateProcess -> IO ()
-runServer buildProcess = do
-    _ <- createProcess buildProcess
+runServer :: IO ()
+runServer = do
     configureLogger
     staticDir <- getStaticDir
     aboutContents <- LazyIO.readFile $ markdownPath ++ "README.md"

.yarn/cache/@types-connect-npm-3.4.35-7337eee0a3-fe81351470.zip

@@ -1,6 +1,3 @@
-import "core-js/stable"
-import "regenerator-runtime/runtime"
-
 import React from "react"
 import ReactDOM from "react-dom"
 import { Graph } from "../graph/Graph"

.yarn/cache/@types-express-npm-4.17.15-f269888d96-b4acd8a836.zip

@@ -1,6 +1,3 @@
-import "core-js/stable"
-import "regenerator-runtime/runtime"
-
 import React from "react"
 import ReactDOM from "react-dom"
 

.yarn/cache/@types-express-serve-static-core-npm-4.17.32-df32b83158-70ec1b8f38.zip

@@ -1,5 +1,3 @@
-import "ag-grid-community/styles/ag-grid.css"
-import "ag-grid-community/styles/ag-theme-alpine.css"
 import React from "react"
 import PropTypes from "prop-types"
 import { CourseModal } from "../common/react_modal.js.jsx"

.yarn/cache/@types-http-proxy-npm-1.17.9-fa2f5ce316-7a6746d007.zip

@@ -1,5 +1,3 @@
-import "core-js/stable"
-import "regenerator-runtime/runtime"
 import React from "react"
 import ReactDOM from "react-dom"
 import Container from "./Container"

.yarn/cache/@types-mime-npm-3.0.1-dec03536dc-4040fac73f.zip

@@ -1,5 +1,3 @@
-import "core-js/stable"
-import "regenerator-runtime/runtime"
 import React from "react"
 import ReactDOM from "react-dom"
 

.yarn/cache/@types-qs-npm-6.9.7-4a3e6ca0d0-7fd6f9c250.zip

@@ -1,6 +1,3 @@
-import "core-js/stable"
-import "regenerator-runtime/runtime"
-
 import { SpecialistPost, MajorPost, MinorPost } from "./post_components.js.jsx"
 
 import React from "react"

.yarn/cache/@types-range-parser-npm-1.2.4-23d797fbde-b7c0dfd508.zip

@@ -1,5 +1,3 @@
-import "core-js/stable"
-import "regenerator-runtime/runtime"
 import React from "react"
 import ReactDOM from "react-dom"
 

.yarn/cache/@types-retry-npm-0.12.0-e4e6294a2c-61a072c763.zip

@@ -6,8 +6,8 @@
   "license": "GPL-3.0",
   "scripts": {
     "start": "stack exec courseography",
-    "watch": "webpack --watch",
-    "build": "webpack --mode production",
+    "watch": "webpack --watch --config webpack.dev.js",
+    "build": "webpack --config webpack.prod.js",
     "test": "jest",
     "prettier": "prettier --write .",
     "eslint": "eslint --fix-dry-run --ignore-path .prettierignore js"
@@ -17,8 +17,10 @@
     "*": "prettier --ignore-unknown --write"
   },
   "dependencies": {
+    "@babel/runtime": "^7.21.0",
     "ag-grid-community": "^29.3.2",
     "ag-grid-react": "^29.3.2",
+    "bootstrap": "^3.1.1",
     "core-js": "^3.30.1",
     "handlebars": "^4.7.7",
     "jquery": "^3.6.0",
@@ -27,9 +29,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-leaflet": "^3.2.5",
-    "react-modal": "^3.16.1",
-    "regenerator-runtime": "^0.13.7",
-    "webpack": "^5.76.3"
+    "react-modal": "^3.16.1"
   },
   "devDependencies": {
     "@babel/core": "^7.21.3",
@@ -62,8 +62,9 @@
     "style-loader": "^3.3.2",
     "stylelint": "^15.3.0",
     "stylelint-config-sass-guidelines": "^10.0.0",
-    "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.13.1"
+    "webpack": "^5.81.0",
+    "webpack-cli": "^5.0.2",
+    "webpack-merge": "^5.8.0"
   },
   "packageManager": "[email protected]"
 }

.yarn/cache/@types-serve-index-npm-1.9.1-9d3cd16a7a-026f3995fb.zip

@@ -2,6 +2,8 @@ $graph-overlay-top-margin: 15px;
 $graph-overlay-side-margin: 15px;
 @import "ag-grid-community/styles/ag-grid.css";
 @import "ag-grid-community/styles/ag-theme-alpine.css";
+@import "leaflet/dist/leaflet.css";
+@import "bootstrap/dist/css/bootstrap.min.css";
 
 @keyframes spin {
   0.0% {

.yarn/cache/@types-serve-static-npm-1.15.0-ec80a4ac87-b6ac93d471.zip

@@ -0,0 +1,68 @@
+const path = require("path")
+const MiniCssExtractPlugin = require("mini-css-extract-plugin")
+const webpack = require("webpack")
+
+const presets = [
+  ["@babel/preset-env", { useBuiltIns: "usage", corejs: 3 }],
+  ["@babel/preset-react"],
+]
+
+const isDevelopment = process.env.NODE_ENV !== "production"
+
+module.exports = {
+  mode: isDevelopment ? "development" : "production",
+  entry: {
+    "js/search/app": "./js/components/search/search.js.jsx",
+    "js/grid/app": "./js/components/grid/grid.js.jsx",
+    "js/graph/app": "./js/components/graph/main.js",
+    "js/post/app": "./js/components/post/post.js.jsx",
+    "js/draw/app": "./js/components/draw/main.js",
+    "js/generate/app": "./js/components/generate/generate.js",
+    "style/app": "./style/app.js",
+  },
+  output: {
+    path: path.resolve(__dirname, "public"),
+    publicPath: "./public",
+    filename: "[name].js",
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: {
+          loader: "babel-loader",
+          options: { presets },
+        },
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.jsx$/,
+        use: {
+          loader: "babel-loader",
+          options: { presets },
+        },
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.css$/i,
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
+      },
+      {
+        test: /\.s[ac]ss$/i,
+        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
+      },
+    ],
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      // Options similar to the same options in webpackOptions.output
+      // both options are optional
+      filename: "[name].css",
+      chunkFilename: "[id].css",
+    }),
+    new webpack.ProvidePlugin({
+      $: "jquery",
+      jQuery: "jquery",
+    }),
+  ],
+}

.yarn/cache/@types-sockjs-npm-0.3.33-07d624a8b3-b9bbb2b5c5.zip

@@ -0,0 +1,7 @@
+const { merge } = require("webpack-merge")
+const common = require("./webpack.common.js")
+
+module.exports = merge(common, {
+  mode: "development",
+  devtool: "inline-source-map",
+})

.yarn/cache/@types-ws-npm-8.5.4-c0237574ef-fefbad20d2.zip

@@ -0,0 +1,7 @@
+const { merge } = require("webpack-merge")
+const common = require("./webpack.common.js")
+
+module.exports = merge(common, {
+  mode: "production",
+  devtool: "source-map",
+})