Improve webpack configuration (#9225)

Improve the webpack configuration to make building LORIS more memory and time efficient. The changes of this PR are described in #9218 (comment)

Resolves #9218

docs/wiki/99_Developers/ReactJS_Guidelines.md

@@ -108,11 +108,12 @@ sudo chown -R $USER:$(id -gn $USER) ./node_modules
 
 We need to use `webpack` in order to transpile `JSX` and `ES6` syntax used in our React code into `ES5` syntax understood by all browsers.
 
-**Step 1: Update `webpack.config.js`**
+**Step 1: Update `webpack.config.ts`**
 
-When you create a new `ES6/JSX file`, ensure you add it to the ```webpack.config.js``` file under the ```config.entry``` object with the following format:
-```
-'./desc/file.js' : './src/file.js'
+When you create a new `ES6/JSX file`, ensure you add it to the `webpack.config.ts` file under the `lorisModules` object with the following format:
+
+```js
+'module_name' : ['FooFileName', 'BarFileName'],
 ```
 
 **Step 2: Transpiling all files**

package.json

@@ -33,10 +33,12 @@
         "@babel/preset-react": "^7.6.3",
         "@types/c3": "^0.7.8",
         "@types/d3": "^7.4.0",
+        "@types/node": "^20.12.7",
         "@types/papaparse": "^5.3.11",
         "@types/react": "^18.0.26",
         "@types/react-dom": "^18.0.9",
         "@types/react-redux": "7.1.16",
+        "@types/webpack": "^5.28.5",
         "@typescript-eslint/eslint-plugin": "^5.45.0",
         "@typescript-eslint/parser": "^5.45.0",
         "alex": ">=11.0.0",
@@ -53,7 +55,8 @@
         "style-loader": "^1.1.3",
         "terser-webpack-plugin": "^5.3.6",
         "ts-loader": "^8.3.0",
-        "typescript": "^4.8.4",
+        "ts-node": "^10.9.2",
+        "typescript": "^4.9.5",
         "webpack": "^5.76.0",
         "webpack-cli": "^4.10.0"
     },

test/run-js-linter.sh

@@ -30,6 +30,6 @@ files="$files jsx/"
 files="$files htdocs/js/ jslib/"
 
 # Other files
-files="$files webpack.config.js npm-postinstall.js"
+files="$files webpack.config.ts npm-postinstall.js"
 
 eslint ${flags} ${files}

tools/new_module.php

@@ -121,8 +121,8 @@
 INSERT INTO modules (Name, Active) VALUES ('$mname', 'Y');
 
 /*
- INSERT INTO permissions (code, description, moduleID, action) 
-     SELECT '$mname','Access module $mname', m.ID, 'View' 
+ INSERT INTO permissions (code, description, moduleID, action)
+     SELECT '$mname','Access module $mname', m.ID, 'View'
         FROM modules m WHERE Name='$mname';
 */
 
@@ -319,7 +319,7 @@ function Index({}) : React.ReactElement {
   in module getWidgets function
 EOF;
 if ($jsx) {
-    print "\n- Update webpack.config.js to ensure module entrypoint is compiled";
+    print "\n- Update webpack.config.ts to ensure module entrypoint is compiled";
 }
 
 /**