Feat/webpack (#2998)

* First commit * Removed govuk for webpack. Modernized javascript importing. Removed dead js * Fixed tests, a few styling bugs * Fixed some table errors and regenerated backstop ref images * Updated tests for coverage * Changes from carlo suggestions
2026-08-16 20:49:00 -04:00 · 2025-10-14 13:20:58 -04:00
parent 3b3191b337
commit 3a39d910b3
62 changed files with 1657 additions and 4861 deletions
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -0,0 +1,162 @@
+const path = require('path');
+const webpack = require('webpack');
+const TerserPlugin = require('terser-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const isProduction = process.env.NODE_ENV === 'production';
+
+module.exports = {
+  mode: isProduction ? 'production' : 'development',
+
+  entry: {
+    all: path.resolve(__dirname, 'app/assets/javascripts/index.js'),
+    styles: path.resolve(__dirname, 'app/assets/sass/uswds/styles.scss')
+  },
+
+  output: {
+    path: path.resolve(__dirname, 'app/static/javascripts'),
+    filename: '[name].js',
+    clean: true
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env']
+          }
+        }
+      },
+      {
+        test: /\.s[ac]ss$/i,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              url: false
+            }
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [require('autoprefixer')]
+              }
+            }
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sassOptions: {
+                loadPaths: [
+                  path.resolve(__dirname, 'app/assets/sass/uswds'),
+                  path.resolve(__dirname, 'node_modules/@uswds'),
+                  path.resolve(__dirname, 'node_modules/@uswds/uswds/packages'),
+                  path.resolve(__dirname, 'node_modules/@uswds/uswds/dist/scss/stylesheets/packages')
+                ]
+              }
+            }
+          }
+        ]
+      }
+    ]
+  },
+
+  resolve: {
+    extensions: ['.js'],
+    alias: {
+      '@javascripts': path.resolve(__dirname, 'app/assets/javascripts'),
+      '@modules': path.resolve(__dirname, 'app/assets/javascripts/modules')
+    }
+  },
+
+  plugins: [
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery',
+      'window.jQuery': 'jquery'
+    }),
+    new MiniCssExtractPlugin({
+      filename: '../css/styles.css'
+    }),
+    new CopyPlugin({
+      patterns: [
+        {
+          from: path.resolve(__dirname, 'app/assets/images'),
+          to: path.resolve(__dirname, 'app/static/images'),
+          noErrorOnMissing: true
+        },
+        {
+          from: path.resolve(__dirname, 'app/assets/pdf'),
+          to: path.resolve(__dirname, 'app/static/pdf'),
+          noErrorOnMissing: true
+        },
+        {
+          from: path.resolve(__dirname, 'app/assets/js/gtm_head.js'),
+          to: path.resolve(__dirname, 'app/static/js/gtm_head.js'),
+          noErrorOnMissing: true
+        },
+        {
+          from: path.resolve(__dirname, 'app/assets/js/setTimezone.js'),
+          to: path.resolve(__dirname, 'app/static/js/setTimezone.js'),
+          noErrorOnMissing: true
+        },
+        {
+          from: path.resolve(__dirname, 'node_modules/@uswds/uswds/dist/js/uswds.min.js'),
+          to: path.resolve(__dirname, 'app/static/js/uswds.min.js')
+        },
+        {
+          from: path.resolve(__dirname, 'node_modules/@uswds/uswds/dist/fonts'),
+          to: path.resolve(__dirname, 'app/static/fonts')
+        },
+        {
+          from: path.resolve(__dirname, 'node_modules/@uswds/uswds/dist/img'),
+          to: path.resolve(__dirname, 'app/static/img')
+        }
+      ]
+    })
+  ],
+
+  optimization: {
+    minimize: isProduction,
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          compress: {
+            drop_console: isProduction,
+            drop_debugger: true,
+            pure_funcs: isProduction ? ['console.info', 'console.debug', 'console.warn', 'console.error'] : [],
+          },
+          mangle: true,
+          format: {
+            comments: false,
+          },
+        },
+        extractComments: false,
+      }),
+    ],
+    splitChunks: false,
+  },
+
+  devtool: isProduction ? false : 'source-map',
+
+  stats: {
+    colors: true,
+    modules: false,
+    children: false,
+    chunks: false,
+    chunkModules: false
+  },
+
+  performance: {
+    hints: isProduction ? 'warning' : false,
+    maxEntrypointSize: 512000,
+    maxAssetSize: 512000,
+  }
+};