Issue #459-#460: Fixed asset building issues

package.json

@@ -29,9 +29,9 @@
     "chart.js": "^4.5.1",
     "jquery": "^4.0.0",
     "jquery-migrate": "^4.0.2",
+    "jquery-sparkline": "^2.4.0",
     "lodash": "^4.18.1",
-    "moment": "^2.30.1",
-    "jquery-sparkline": "^2.4.0"
+    "moment": "^2.30.1"
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",
@@ -50,6 +50,7 @@
     "mini-css-extract-plugin": "^2.9.0",
     "sass": "^1.77.1",
     "sass-loader": "^14.2.1",
+    "terser-webpack-plugin": "^5.6.1",
     "webpack": "^5.92.1",
     "webpack-cli": "^5.1.4"
   },

webpack.config.js

@@ -1,6 +1,6 @@
 /*
  * Webpack is used to compile and minify/uglify JS and Sass.
- * Since this will nuke some of the directories inside the public directory,
+ * Since this will nuke some directories inside the public directory,
  * you should no longer manually add images etc. to the public folder.
  * We have set up a configuration that will automatically copy any image
  * from the images folder here to public/images/{moduleName}.
@@ -50,8 +50,8 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const MiniCssExtractPlugin   = require("mini-css-extract-plugin");
 const TerserPlugin           = require('terser-webpack-plugin');
 
-// Prepare plugin to extract styles into a css file
-// instead of a javascript file
+// Prepare plugin to extract styles into a CSS file
+// instead of a JavaScript file
 
 // dynamically build webpack entries based on registered app modules
 let entries    = {
@@ -96,26 +96,37 @@ appModules.forEach(function (appModule) {
     }
 });
 
+Object.keys(entries).forEach(function (name) {
+    if (name === 'app') {
+        return;
+    }
+
+    entries[name] = {
+        import: entries[name],
+        dependOn: 'app',
+    };
+});
+
 /*
  * Lastly, export the final module
  * and the assets
  */
 module.exports = {
     // This is the basepath for Webpack to look for source files
-    // if you need to include modules outside of the App module,
+    // if you need to include modules outside the App module,
     // move the "/App/assets" portion of the context onto the two
     // strings below, so it becomes "./App/assets/js/app.js" etc.
     context: path.resolve(__dirname, './src'),
 
     // These are our entry files, this is the files Webpack will use
-    // when looking for Sass and Javascript to compile.
+    // when looking for Sass and JavaScript to compile.
     // The format is "DESTINATION": "SOURCE", and each path is
     // relative to the output path and the context respectively.
     entry: entries,
 
     // The Output is where Webpack will export our files to
     // the filename will be resolved to the key in the entry object above.
-    // The publicPath is what it'll rewrite css relative urls to use.
+    // The publicPath is what it'll rewrite CSS relative urls to use.
     // The path is where it'll save files too
     output: {
         filename: './js/[name].js',
@@ -236,7 +247,7 @@ function generateBaseRules()
             test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
             exclude: [/images?|img/],
             use: [
-                // As SVG may count as both font or image
+                // As SVG may count as both font or image,
                 // we will not treat any file in a folder
                 // with the name image(s) or img as a font
                 'file-loader?name=fonts/[name].[ext]'