upgrade: Migrate to Vue 3

build/webpack.config.js

@@ -1,25 +1,29 @@
 const webpack = require('webpack');
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const { VueLoaderPlugin } = require('vue-loader');
 const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const fs = require('fs');
+const SvgSpritePlugin = require('../tool/plugin-svg-sprite');
 
 const distPath = path.resolve(__dirname, '../public');
-
+const svgPath = path.resolve(__dirname, '../src/asset/icon');
 
 module.exports = (env, argv) => {
-
   const isDev = argv.mode === 'development';
 
   let configLocal = {};
   if (isDev) {
-    const configLocalPath = path.resolve(__dirname, '../config/config.local.js');
+    const configLocalPath = path.resolve(
+      __dirname,
+      '../config/config.local.js'
+    );
     if (fs.existsSync(configLocalPath)) {
       configLocal = require(configLocalPath);
     }
   }
 
-  return [{
+  return [
+    {
       entry: path.resolve(__dirname, '../src/main.js'),
       output: {
         publicPath: './',
@@ -77,7 +81,11 @@ module.exports = (env, argv) => {
             ]
           },
           {
-            test: /\.(svg|html)$/,
+            test: /\.svg$/,
+            type: 'asset/source'
+          },
+          {
+            test: /\.html$/,
             use: [
               {
                 loader: 'html-loader',
@@ -114,9 +122,16 @@ module.exports = (env, argv) => {
         vue: 'Vue'
       },
       plugins: [
+        new SvgSpritePlugin({
+          spriteFilename: '../asset/sprite.svg',
+          svgPath: svgPath
+        }),
         new webpack.DefinePlugin({
           // It can be used in the code directly.
-          CONFIG_LOCAL: JSON.stringify(configLocal),
+          CONFIG_LOCAL: JSON.stringify(configLocal)
+        }),
+        new webpack.DefinePlugin({
+          __VUE_PROD_DEVTOOLS__: JSON.stringify(!isDev)
         }),
         new webpack.IgnorePlugin({
           resourceRegExp: /^fs$/