Adds option for alternate sites layout

webpack.config.js

@@ -1,13 +1,64 @@
 const path = require('path');
 const Terser = require('terser-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
 module.exports = {
     mode: 'production',
-    entry: './jumpapp/assets/js/src/index.js',
+    entry: {
+        index: './jumpapp/assets/js/src/index.js',
+        styles: './jumpapp/assets/css/src/styles.css',
+    },
     output: {
-        filename: 'index.bundle.js',
+        filename: '[name].[contenthash].min.js',
         path: path.resolve(__dirname, './jumpapp/assets/js/'),
     },
+    module: {
+        rules: [
+            {
+                test: /\.css$/,
+                use: [
+                    {
+                        loader: MiniCssExtractPlugin.loader
+                    },
+                    {
+                        loader: "css-loader",
+                        options: {
+                            url: false // Stop webpack emitting image/font from URLs found in CSS.
+                        }
+                    }
+                ],
+            }
+        ]
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            filename: path.resolve(__dirname, './jumpapp/templates/header.mustache'),
+            template: path.resolve(__dirname, './jumpapp/templates/src/header.mustache'),
+            inject: false,
+            minify: false, // Required to prevent addition of closing tags like body and html.
+        }),
+        new HtmlWebpackPlugin({
+            filename: path.resolve(__dirname, './jumpapp/templates/footer.mustache'),
+            template: path.resolve(__dirname, './jumpapp/templates/src/footer.mustache'),
+            inject: false,
+            minify: false, // Required to prevent addition of closing tags like body and html.
+        }),
+        new MiniCssExtractPlugin({filename: '../css/[name].[contenthash].min.css'}),
+        new RemoveEmptyScriptsPlugin(),
+        new CleanWebpackPlugin({
+            verbose: true,
+            cleanStaleWebpackAssets: true,
+            cleanOnceBeforeBuildPatterns: [
+                'index.*.min.js',
+                path.resolve(__dirname, './jumpapp/assets/css/styles.*.min.css')
+            ],
+            dangerouslyAllowCleanPatternsOutsideProject: true,
+        })
+    ],
     optimization: {
         minimizer: [
             new Terser({
@@ -18,6 +69,7 @@ module.exports = {
                 },
                 extractComments: false,
             }),
+            new CssMinimizerPlugin(),
         ],
     },
 };