Add all build steps

.gitignore

@@ -0,0 +1,2 @@
+build/
+node_modules/

docker-compose.yml

@@ -0,0 +1,23 @@
+version: '3.8'
+
+services:
+    nginx:
+        image: daniel-website/nginx:dev
+        build:
+            context: ./docker/nginx
+        ports:
+            - 127.0.0.1:8080:80
+        volumes:
+            - ./build:/var/www/html
+    webpack:
+        image: daniel-website/webpack:dev
+        build:
+            context: ./docker/webpack
+        volumes:
+            - ./src:/code/src
+            - ./build:/code/build
+            - ./node_modules:/code/node_modules
+            - ./package.json:/code/package.json
+            - ./package-lock.json:/code/package-lock.json
+            - ./webpack.config.js:/code/webpack.config.js
+        tty: true

docker/nginx/Dockerfile

@@ -0,0 +1,3 @@
+FROM nginx:1.22.0-alpine
+
+COPY ./etc/nginx/conf.d/ /etc/nginx/conf.d/

docker/nginx/etc/nginx/conf.d/default.conf

@@ -0,0 +1,14 @@
+server {
+    listen       80 default_server;
+    listen  [::]:80 default_server;
+
+    location / {
+        root       /var/www/html;
+        index      index.html;
+        try_files  $uri $uri/ /index.html;
+    }
+
+    # redirect server error pages to a static page
+    error_page   404              /404.html;
+    error_page   500 502 503 504  /50x.html;
+}

docker/webpack/Dockerfile

@@ -0,0 +1,9 @@
+FROM node:18
+
+COPY entrypoint.sh /entrypoint.sh
+ENTRYPOINT ["/entrypoint.sh"]
+
+USER node
+WORKDIR /code
+
+CMD ["npm", "run", "build:watch"]

docker/webpack/entrypoint.sh

@@ -0,0 +1,6 @@
+#!/bin/sh
+set -e
+
+npm i
+
+exec "$@"

package.json

@@ -0,0 +1,34 @@
+{
+    "private": true,
+    "name": "personal-site",
+    "version": "1.0.0",
+    "description": "This the repository for Daniel's personal website.",
+    "scripts": {
+        "build": "webpack --mode=production",
+        "build:dev": "webpack --mode=development",
+        "build:watch": "webpack --mode=development --watch",
+        "start:dev": "webpack-dev-server --mode=development"
+    },
+    "repository": {
+        "type": "git",
+        "url": "ssh://git@git.chaoticlogic.us:2302/daniel/personal-website.git"
+    },
+    "keywords": [
+        "portfolio",
+        "website"
+    ],
+    "author": "Daniel \"Daniel_I_Am\" de Cloet",
+    "devDependencies": {
+        "css-loader": "^6.7.1",
+        "dart-sass": "^1.25.0",
+        "html-webpack-plugin": "^5.5.0",
+        "mini-css-extract-plugin": "^2.6.0",
+        "pug": "^2.0.4",
+        "pug-loader": "^2.4.0",
+        "sass-loader": "^13.0.0",
+        "style-loader": "^3.3.1",
+        "webpack": "^5.72.1",
+        "webpack-cli": "^4.9.2",
+        "webpack-dev-server": "^4.9.0"
+    }
+}

webpack.config.js

@@ -0,0 +1,65 @@
+const fs = require('fs');
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const { ModuleFilenameHelpers } = require('webpack');
+
+function getPugHtmlPluginEntries(basepath) {
+    const pugTemplateFiles = fs.readdirSync(basepath)
+        .filter(file => path.extname(file).toLowerCase() === '.pug');
+
+    return pugTemplateFiles.map(pugFileName => new HtmlWebpackPlugin({
+        inject: true,
+        hash: false,
+        filename: `${path.parse(pugFileName).name}.html`,
+        template: path.join(basepath, pugFileName),
+    }));
+}
+
+module.exports = (env, argv) => {
+    const isDevelopment = argv.mode === 'development';
+
+    return {
+        entry: {
+            app: './src/js/app.js',
+        },
+        output: {
+            path: path.resolve(__dirname, 'build'),
+            filename: "[name].bundle.js",
+        },
+        devServer: {
+            port: 3000,
+        },
+        plugins: [
+            ...getPugHtmlPluginEntries('./src'),
+            new MiniCssExtractPlugin({
+                filename: isDevelopment ? '[name].css' : '[name].[hash].css',
+                chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css',
+            }),
+        ],
+        module: {
+            rules: [
+                {
+                    test: /\.pug$/,
+                    use: ["pug-loader"],
+                },
+                {
+                    test: /\.scss$/,
+                    use: [
+                        isDevelopment ? "style-loader" : MiniCssExtractPlugin.loader,
+                        "css-loader",
+                        {
+                            loader: "sass-loader",
+                            options: {
+                                sourceMap: isDevelopment,
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+        resolve: {
+            extensions: ['.js', '.scss'],
+        },
+    };
+}