refs #2454 Upgrade webpack version to 5

.electron-vue/webpack.renderer.config.js

@@ -12,7 +12,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const { VueLoaderPlugin } = require('vue-loader')
 
 let rendererConfig = {
-  devtool: '#cheap-module-eval-source-map',
+  devtool: 'eval-cheap-module-source-map',
   entry: {
     renderer: path.join(__dirname, '../src/renderer/main.ts')
   },
@@ -29,6 +29,22 @@ let rendererConfig = {
           }
         }
       },
+      {
+        test: /\.vue$/,
+        use: {
+          loader: 'vue-loader',
+          options: {
+            extractCSS: process.env.NODE_ENV === 'production',
+            loaders: {
+              js: 'ts-loader',
+              ts: 'ts-loader',
+              sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
+              scss: 'vue-style-loader!css-loader!sass-loader',
+              less: 'vue-style-loader!css-loader!less-loader'
+            }
+          }
+        }
+      },
       {
         test: /\.scss$/,
         use: [
@@ -113,22 +129,6 @@ let rendererConfig = {
         test: /\.node$/,
         use: 'node-loader'
       },
-      {
-        test: /\.vue$/,
-        use: {
-          loader: 'vue-loader',
-          options: {
-            extractCSS: process.env.NODE_ENV === 'production',
-            loaders: {
-              js: 'ts-loader',
-              ts: 'ts-loader',
-              sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
-              scss: 'vue-style-loader!css-loader!sass-loader',
-              less: 'vue-style-loader!css-loader!less-loader'
-            }
-          }
-        }
-      },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
         use: {
@@ -152,7 +152,7 @@ let rendererConfig = {
         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
         use: {
           loader: 'url-loader',
-          query: {
+          options: {
             limit: 10000,
             name: 'fonts/[name]--[folder].[ext]'
           }

.electron-vue/webpack.web.config.js

@@ -28,6 +28,20 @@ let webConfig = {
           }
         }
       },
+      {
+        test: /\.vue$/,
+        use: {
+          loader: 'vue-loader',
+          options: {
+            extractCSS: true,
+            loaders: {
+              sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
+              scss: 'vue-style-loader!css-loader!sass-loader',
+              less: 'vue-style-loader!css-loader!less-loader'
+            }
+          }
+        }
+      },
       {
         test: /\.scss$/,
         use: ['vue-style-loader', 'css-loader', 'sass-loader']
@@ -54,25 +68,11 @@ let webConfig = {
         include: [path.resolve(__dirname, '../src/renderer')],
         exclude: /node_modules/
       },
-      {
-        test: /\.vue$/,
-        use: {
-          loader: 'vue-loader',
-          options: {
-            extractCSS: true,
-            loaders: {
-              sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
-              scss: 'vue-style-loader!css-loader!sass-loader',
-              less: 'vue-style-loader!css-loader!less-loader'
-            }
-          }
-        }
-      },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
         use: {
           loader: 'url-loader',
-          query: {
+          options: {
             limit: 10000,
             name: 'imgs/[name].[ext]'
           }
@@ -82,7 +82,7 @@ let webConfig = {
         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
         use: {
           loader: 'url-loader',
-          query: {
+          options: {
             limit: 10000,
             name: 'fonts/[name].[ext]'
           }

package.json

@@ -285,7 +285,7 @@
     "prettier": "^2.3.0",
     "prettier-stylelint": "^0.4.2",
     "regenerator-runtime": "^0.13.7",
-    "sass-loader": "^10.1.1",
+    "sass-loader": "^11.1.1",
     "style-loader": "^2.0.0",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^20.0.0",
@@ -295,13 +295,12 @@
     "typescript": "^4.2.4",
     "url-loader": "^4.1.1",
     "vue-html-loader": "^1.2.4",
-    "vue-loader": "^15.9.6",
+    "vue-loader": "^15.9.7",
     "vue-style-loader": "^4.1.3",
     "vue-template-compiler": "^2.6.11",
-    "webpack": "^4.44.2",
+    "webpack": "^5.37.1",
     "webpack-cli": "^4.5.0",
     "webpack-dev-server": "^3.11.2",
-    "webpack-hot-middleware": "^2.25.0",
-    "webpack-merge": "^5.7.3"
+    "webpack-hot-middleware": "^2.25.0"
   }
 }