Add webpack configuration for CSS extraction, minification, and optimization

package.json

@@ -4,9 +4,13 @@
   "private": true,
   "scripts": {
     "start": "node ./bin/www",
-    "dev": "nodemon ./bin/www"
+    "dev": "nodemon ./bin/www",
+    "build": "webpack --mode development",
+    "dist": "webpack --mode production",
+    "watch": "webpack --watch --mode development"
   },
   "dependencies": {
+    "bootstrap": "^5.3.2",
     "cookie-parser": "~1.4.4",
     "csv-parser": "^3.0.0",
     "debug": "~2.6.9",
@@ -16,10 +20,25 @@
     "express-handlebars": "^7.1.2",
     "handlebars": "^4.7.8",
     "http-errors": "~1.6.3",
+    "jquery": "^3.7.1",
     "morgan": "~1.9.1",
-    "slugify": "^1.6.6"
+    "popper.js": "^1.16.1",
+    "slugify": "^1.6.6",
+    "toastr": "^2.1.4"
   },
   "devDependencies": {
-    "nodemon": "^3.0.1"
+    "@babel/preset-env": "^7.22.20",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^9.1.3",
+    "babel-preset-env": "^1.7.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "css-loader": "^6.8.1",
+    "css-minimizer-webpack-plugin": "^5.0.1",
+    "mini-css-extract-plugin": "^2.7.6",
+    "node-sass": "^9.0.0",
+    "nodemon": "^3.0.1",
+    "sass-loader": "^13.3.2",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4"
   }
 }

webpack.config.js

@@ -0,0 +1,95 @@
+const path = require('path');
+
+// css extraction and minification
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+
+// clean out build dir in-between builds
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+
+module.exports = (env, argv) => {
+  return {
+    entry: {
+      'main': [
+        './src/assets/js/main.js',
+        './src/assets/sass/main.scss'
+      ]
+    },
+    target: ['web', 'es5'],
+    output: {
+      filename: './public/js/[name].min.js',
+      path: path.resolve(__dirname)
+    },
+    devtool: "source-map",
+    module: {
+      rules: [
+        // js babelization
+        {
+          test: /\.(js|jsx)$/,
+          exclude: /node_modules/,
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env'],
+          }
+        },
+        // sass compilation
+        {
+          test: /\.(sass|scss)$/,
+          use: [
+            MiniCssExtractPlugin.loader, 
+            {
+              loader: "css-loader",
+              options: {
+                sourceMap: true,
+              },
+            },
+            {
+              loader: "sass-loader",
+              options: {
+                sourceMap: true,
+              },
+            }
+          ]
+        },
+        // loader for webfonts (only required if loading custom fonts)
+        {
+          test: /\.(woff|woff2|eot|ttf|otf)$/,
+          type: 'asset/resource',
+          generator: {
+            filename: './public/css/font/[name][ext]',
+          }
+        },
+        // loader for images and icons (only required if css references image files)
+        {
+          test: /\.(png|jpg|gif)$/,
+          type: 'asset/resource',
+          generator: {
+            filename: './public/css/img/[name][ext]',
+          }
+        },
+      ]
+    },
+    plugins: [
+      // clear out build directories on each build
+      new CleanWebpackPlugin({
+        cleanOnceBeforeBuildPatterns: [
+          './public/js/*',
+          './public/css/*'
+        ]
+      }),
+      // css extraction into dedicated file
+      new MiniCssExtractPlugin({
+        filename: './public/css/main.min.css'
+      }),
+    ],
+    optimization: {
+      // minification - only performed when mode = production
+      minimizer: [
+        // js minification - special syntax enabling webpack 5 default terser-webpack-plugin 
+        `...`,
+        // css minification
+        new CssMinimizerPlugin(),
+      ]
+    },
+  }
+};