diff --git a/installer/templates/phx_assets/package.json b/installer/templates/phx_assets/package.json
index 9bc3c36576..e6774e93ac 100644
--- a/installer/templates/phx_assets/package.json
+++ b/installer/templates/phx_assets/package.json
@@ -13,18 +13,16 @@
     "nprogress": "^0.2.0"<% end %>
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "babel-loader": "^8.0.0",
-    "copy-webpack-plugin": "^5.1.1",
-    "css-loader": "^3.4.2",
-    "sass-loader": "^8.0.2",
-    "sass": "^1.27.0",
-    "hard-source-webpack-plugin": "^0.13.1",
-    "mini-css-extract-plugin": "^0.9.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
-    "terser-webpack-plugin": "^2.3.2",
-    "webpack": "4.41.5",
-    "webpack-cli": "^3.3.2"
+    "@babel/core": "^7.12.0",
+    "@babel/preset-env": "^7.12.0",
+    "babel-loader": "^8.2.0",
+    "copy-webpack-plugin": "^6.3.0",
+    "css-loader": "^5.0.0",
+    "css-minimizer-webpack-plugin": "^1.1.5",
+    "sass-loader": "^10.1.0",
+    "sass": "^1.29.0",
+    "mini-css-extract-plugin": "^1.3.0",
+    "webpack": "^5.8.0",
+    "webpack-cli": "^4.2.0"
   }
 }
diff --git a/installer/templates/phx_assets/webpack.config.js b/installer/templates/phx_assets/webpack.config.js
index 4997e8c20a..d1eb178727 100644
--- a/installer/templates/phx_assets/webpack.config.js
+++ b/installer/templates/phx_assets/webpack.config.js
@@ -1,20 +1,15 @@
 const path = require('path');
 const glob = require('glob');
-const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = (env, options) => {
   const devMode = options.mode !== 'production';
 
   return {
     optimization: {
-      minimizer: [
-        new TerserPlugin({ cache: true, parallel: true, sourceMap: devMode }),
-        new OptimizeCSSAssetsPlugin({})
-      ]
+      minimizer: ["...", new CssMinimizerPlugin()]
     },
     entry: {
       'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
@@ -46,8 +41,7 @@ module.exports = (env, options) => {
     },
     plugins: [
       new MiniCssExtractPlugin({ filename: '../css/[name].css' }),
-      new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
+      new CopyWebpackPlugin({patterns: [{ from: 'static/', to: '../' }]})
     ]
-    .concat(devMode ? [new HardSourceWebpackPlugin()] : [])
   }
 };
diff --git a/installer/templates/phx_single/config/dev.exs b/installer/templates/phx_single/config/dev.exs
index 63f9b4caf9..a0b9bc85d3 100644
--- a/installer/templates/phx_single/config/dev.exs
+++ b/installer/templates/phx_single/config/dev.exs
@@ -16,7 +16,7 @@ config :<%= @app_name %>, <%= @endpoint_module %>,
       "node_modules/webpack/bin/webpack.js",
       "--mode",
       "development",
-      "--watch-stdin",
+      "--watch",
       cd: Path.expand("../assets", __DIR__)
     ]
   ]<% else %>[]<% end %>