diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index f9ec676ac..f4aadddd9 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -194,7 +194,11 @@ jobs:
         -   name: Install the dependencies for composer
             shell: bash
             run: >-
-                make npm composer_dist
+                make composer_dist
+        -   name: Build node app
+            shell: bash
+            run: >-
+                make npm
         
         -   name: Create the app store package
             shell: bash
diff --git a/CHANGELOG.md b/CHANGELOG.md
index c9770da18..4861f95d3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -33,6 +33,8 @@
   [#700](https://github.com/nextcloud/cookbook/pull/700) @christianlupus
 - Correct error messages when recipe already exists
   [#702](https://github.com/nextcloud/cookbook/pull/702) @christianlupus
+- Update webpack version to 5.x
+  [#717](https://github.com/nextcloud/cookbook/pull/717) @christianlupus
   
 ## 0.8.4 - 2021-03-08
 
diff --git a/package.json b/package.json
index ef781d0dd..f87a483f0 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "main": "src/main.js",
   "scripts": {
     "build": "node node_modules/webpack/bin/webpack.js --progress --config webpack.build.js",
-    "build-dev": "node node_modules/webpack/bin/webpack.js --progress --config webpack.devel.js",
+    "build-dev": "node node_modules/webpack/bin/webpack.js --progress --config webpack.build-dev.js",
     "dev": "node node_modules/webpack/bin/webpack.js --progress --watch --config webpack.devel.js",
     "test": "echo \"Error: no test specified\" && exit 1",
     "prettier": "npx prettier --check src",
@@ -66,7 +66,7 @@
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.6.11",
     "vue-template-loader": "^1.1.0",
-    "webpack": "^4.42.1",
+    "webpack": "^5.37.0",
     "webpack-bundle-analyzer": "^4.1.0",
     "webpack-cli": "^4.5.0",
     "webpack-merge": "^5.7.3"
diff --git a/webpack.build-dev.js b/webpack.build-dev.js
new file mode 100644
index 000000000..03c5f9351
--- /dev/null
+++ b/webpack.build-dev.js
@@ -0,0 +1,8 @@
+const { merge } = require('webpack-merge')
+const common = require('./webpack.config.js')
+
+module.exports = merge(common, {
+    mode: 'development',
+    devtool: 'inline-cheap-source-map',
+    plugins: [],
+})
diff --git a/webpack.build.js b/webpack.build.js
index af85ae558..650d8d54b 100644
--- a/webpack.build.js
+++ b/webpack.build.js
@@ -20,7 +20,7 @@ module.exports = merge(common, {
                         comments: false
                     }
                 },
-                sourceMap: true
+                parallel: true
             })
         ],
     },
diff --git a/webpack.config.js b/webpack.config.js
index 5d0142fe9..694c572a4 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -22,6 +22,10 @@ module.exports = {
     },
     module: {
         rules: [
+            {
+                test: /\.vue$/,
+                loader: 'vue-loader',
+            },
             {
                 test: /\.css$/,
                 use: [{ loader: 'vue-style-loader' }, 
@@ -39,10 +43,6 @@ module.exports = {
                 test: /\.html$/,
                 loader: 'vue-template-loader',
             },
-            {
-                test: /\.vue$/,
-                loader: 'vue-loader',
-            },
             {
                 test: /\.js$/,
                 loader: 'babel-loader',
@@ -57,7 +57,7 @@ module.exports = {
             },
             {
                 test: /\.(eot|woff|woff2|ttf)$/,
-                loaders: 'file-loader',
+                loader: 'file-loader',
                 options: {
                     name: '[path][name].[ext]?[hash]'
                 },
diff --git a/webpack.devel.js b/webpack.devel.js
index b3ccae113..1b347370d 100644
--- a/webpack.devel.js
+++ b/webpack.devel.js
@@ -1,10 +1,8 @@
 const { merge } = require('webpack-merge')
-const common = require('./webpack.config.js')
+const base = require('./webpack.build-dev.js')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 
-module.exports = merge(common, {
-    mode: 'development',
-    devtool: 'inline-cheap-source-map',
+module.exports = merge(base, {
     plugins: [
         new BundleAnalyzerPlugin(
             {