diff --git a/build/Build.fs b/build/Build.fs
index fdc65b87..9f5c356f 100644
--- a/build/Build.fs
+++ b/build/Build.fs
@@ -235,13 +235,13 @@ Target.create "InstallClient" (fun _ ->
 
 Target.create "bundle" (fun _ ->
     [ "server", dotnet $"publish -c Release -o \"{deployPath}\"" serverPath
-      "client", dotnet "fable src/Client -o src/Client/output -e .fs.js -s --run webpack --config webpack.config.js" "" ]
+      "client", dotnet "fable src/Client -o src/Client/output -e .fs.js -s --run npm run build" "" ]
     |> runParallel
 )
 
 Target.create "bundle-linux" (fun _ ->
     [ "server", dotnet $"publish -c Release -r linux-x64 -o \"{deployPath}\"" serverPath
-      "client", dotnet "fable src/Client -s --run webpack --config webpack.config.js" "" ]
+      "client", dotnet "fable src/Client -s --run npm run build" "" ]
     |> runParallel
 )
 
@@ -270,7 +270,7 @@ Target.create "RunTests" (fun _ ->
     run dotnet "build" sharedTestsPath
     [
         "server", dotnet "watch run -p tests/Server" ""
-        "client", dotnet "fable watch tests/Client -o tests/Client/output -e .fs.js -s --run webpack-dev-server --config webpack.tests.config" "" ]
+        "client", dotnet "fable watch tests/Client -o tests/Client/output -e .fs.js -s --run npm run test:live" "" ]
     |> runParallel
 )
 
diff --git a/package-lock.json b/package-lock.json
index d770a1cd..2a8704f6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,7 +36,7 @@
                 "webpack-dev-server": "^4.5.0"
             },
             "engines": {
-                "node": "~16",
+                "node": "~16 || ~18",
                 "npm": "~8"
             }
         },
diff --git a/package.json b/package.json
index ac488b19..6e4209ec 100644
--- a/package.json
+++ b/package.json
@@ -4,13 +4,13 @@
     ],
     "private": true,
     "engines": {
-        "node": "~16",
+        "node": "~16 || ~18",
         "npm": "~8"
     },
     "scripts": {
-        "start": "webpack-dev-server",
-        "build": "webpack -p",
-        "test:live": "webpack-dev-server --config webpack.tests.config.js"
+        "start": "webpack-dev-server --mode development",
+        "build": "webpack --mode production",
+        "test:live": "webpack-dev-server --mode development --env test"
     },
     "devDependencies": {
         "@babel/core": "^7.16.0",
diff --git a/webpack.config.js b/webpack.config.js
index 6490520e..97a520da 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -68,7 +68,7 @@ var TEST_CONFIG = {
     // to a external API server. See https://webpack.js.org/configuration/dev-server/#devserver-proxy
     devServerProxy: undefined,
     babel: undefined,
-    cssEntry: undefined,
+    cssEntry: './src/Client/style.scss',
 }
 
 var path = require('path');
diff --git a/webpack.tests.config.js b/webpack.tests.config.js
deleted file mode 100644
index 27de0698..00000000
--- a/webpack.tests.config.js
+++ /dev/null
@@ -1,127 +0,0 @@
-// Template for webpack.config.js in Fable projects
-// Find latest version in https://github.com/fable-compiler/webpack-config-template
-
-// In most cases, you'll only need to edit the CONFIG object (after dependencies)
-// See below if you need better fine-tuning of Webpack options
-
-var path = require('path');
-var webpack = require('webpack');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var CopyWebpackPlugin = require('copy-webpack-plugin');
-var MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-var CONFIG = {
-    // The tags to include the generated JS and CSS will be automatically injected in the HTML template
-    // See https://github.com/jantimon/html-webpack-plugin
-    indexHtmlTemplate: 'tests/Client/index.html',
-    fsharpEntry: 'tests/Client/output/Client.Tests.fs.js',
-    outputDir: 'tests/Client',
-    assetsDir: 'tests/Client',
-    devServerPort: 8081,
-    // When using webpack-dev-server, you may need to redirect some calls
-    // to a external API server. See https://webpack.js.org/configuration/dev-server/#devserver-proxy
-    devServerProxy: undefined,
-    babel: undefined
-}
-
-// If we're running the webpack-dev-server, assume we're in development mode
-var isProduction = !process.argv.find(v => v.indexOf('webpack-dev-server') !== -1);
-var environment = isProduction ? 'production' : 'development';
-process.env.NODE_ENV = environment;
-console.log('Bundling for ' + environment + '...');
-
-// The HtmlWebpackPlugin allows us to use a template for the index.html page
-// and automatically injects <script> or <link> tags for generated bundles.
-var commonPlugins = [
-    new HtmlWebpackPlugin({
-        filename: 'index.html',
-        template: resolve(CONFIG.indexHtmlTemplate)
-    })
-];
-
-module.exports = {
-    // In development, split the JavaScript and CSS files in order to
-    // have a faster HMR support. In production bundle styles together
-    // with the code because the MiniCssExtractPlugin will extract the
-    // CSS in a separate files.
-    entry: {
-        app: resolve(CONFIG.fsharpEntry)
-    },
-    // Add a hash to the output file name in production
-    // to prevent browser caching if code changes
-    output: {
-        path: resolve(CONFIG.outputDir),
-        filename: isProduction ? '[name].[fullhash].js' : '[name].js'
-    },
-    mode: isProduction ? 'production' : 'development',
-    devtool: isProduction ? 'source-map' : 'eval-source-map',
-    optimization: {
-        runtimeChunk: "single",
-        moduleIds: 'deterministic',
-        // Split the code coming from npm packages into a different file.
-        // 3rd party dependencies change less often, let the browser cache them.
-        splitChunks: {
-            chunks: 'all'
-        },
-    },
-    // Besides the HtmlPlugin, we use the following plugins:
-    // PRODUCTION
-    //      - MiniCssExtractPlugin: Extracts CSS from bundle to a different file
-    //          To minify CSS, see https://github.com/webpack-contrib/mini-css-extract-plugin#minimizing-for-production
-    //      - CopyWebpackPlugin: Copies static assets to output directory
-    // DEVELOPMENT
-    //      - HotModuleReplacementPlugin: Enables hot reloading when code changes without refreshing
-    plugins: isProduction ?
-        commonPlugins.concat([
-            new MiniCssExtractPlugin({ filename: 'style.[name].[fullhash].css' }),
-            new CopyWebpackPlugin({ patterns: [{ from: resolve(CONFIG.assetsDir) }]}),
-        ])
-        : commonPlugins,
-    resolve: {
-        // See https://github.com/fable-compiler/Fable/issues/1490
-        symlinks: false
-    },
-    // Configuration for webpack-dev-server
-    devServer: {
-        historyApiFallback: true,
-        host: '0.0.0.0',
-        port: CONFIG.devServerPort,
-        proxy: CONFIG.devServerProxy,
-        static: {
-            directory: resolve(CONFIG.assetsDir),
-            publicPath: '/'
-        }
-    },
-    // - sass-loaders: transforms SASS/SCSS into JS
-    // - file-loader: Moves files referenced in the code (fonts, images) into output folder
-    module: {
-        rules: [
-            {
-                test: /\.(sass|scss|css)$/,
-                use: [
-                    isProduction
-                        ? MiniCssExtractPlugin.loader
-                        : 'style-loader',
-                    'css-loader',
-                    {
-                        loader: 'sass-loader',
-                        options: { implementation: require('sass') }
-                    }
-                ],
-            },
-            {
-                test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*)?$/,
-                use: ['file-loader']
-            },
-            {
-                test: /\.js$/,
-                enforce: "pre",
-                use: ['source-map-loader'],
-            }
-        ]
-    }
-};
-
-function resolve(filePath) {
-    return path.isAbsolute(filePath) ? filePath : path.join(__dirname, filePath);
-}