升级webpack5

umbrella22
.babelrc
.electron-vue/build.js
.electron-vue/dev-runner.js
.electron-vue/utils.js
.electron-vue/webpack.main.config.js
.electron-vue/webpack.renderer.config.js
.gitignore
config/index.js
package.json
src/main/config/menu.ts
src/main/services/downloadFile.ts
yarn.lock
--- a/.babelrc
查看文件 @37036de
+++ b/.babelrc
查看文件 @37036de
@@ -6,6 +6,8 @@
         [
           "@babel/preset-env",
           {
+            "useBuiltIns": "usage",
+            "corejs": 3,
             "targets": {
               "node": 7
             }
@@ -46,7 +48,9 @@
         [
           "@babel/preset-env",
           {
-            "modules": false
+            "modules": false,
+            "useBuiltIns": "usage",
+            "corejs": 3
           }
         ]
       ],
@@ -84,7 +88,9 @@
         [
           "@babel/preset-env",
           {
-            "modules": false
+            "modules": false,
+            "useBuiltIns": "usage",
+            "corejs": 3
           }
         ]
       ],
--- a/.electron-vue/build.js
查看文件 @37036de
+++ b/.electron-vue/build.js
查看文件 @37036de
 'use strict'
-
 process.env.NODE_ENV = 'production'
-
 const { say } = require('cfonts')
 const chalk = require('chalk')
 const del = require('del')
@@ -21,16 +19,16 @@ if (process.env.BUILD_TARGET === 'clean') clean()
 else if (process.env.BUILD_TARGET === 'web') web()
 else build()
-function clean () {
+function clean() {
-  del.sync(['dist/electron/*','build/*', '!build/icons','!build/lib','!build/lib/electron-build.*', '!build/icons/icon.*'])
+  del.sync(['dist/electron/*', 'build/*', '!build/icons', '!build/lib', '!build/lib/electron-build.*', '!build/icons/icon.*'])
   console.log(`\n${doneLog}clear done`)
   process.exit()
 }
-function build () {
+function build() {
   greeting()
-  del.sync(['dist/electron/*', '!.gitkeep'])
+  del.sync(['dist/electron/*', 'build/*', '!build/icons', '!build/lib', '!build/lib/electron-build.*', '!build/icons/icon.*'])
   const tasks = ['main', 'renderer']
   const m = new Multispinner(tasks, {
@@ -68,7 +66,7 @@ function build () {
   })
 }
-function pack (config) {
+function pack(config) {
   return new Promise((resolve, reject) => {
     config.mode = 'production'
     webpack(config, (err, stats) => {
@@ -96,7 +94,7 @@ function pack (config) {
   })
 }
-function web () {
+function web() {
   del.sync(['dist/web/*', '!.gitkeep'])
   rendererConfig.mode = 'production'
   webpack(rendererConfig, (err, stats) => {
@@ -111,7 +109,7 @@ function web () {
   })
 }
-function greeting () {
+function greeting() {
   const cols = process.stdout.columns
   let text = ''
--- a/.electron-vue/dev-runner.js
查看文件 @37036de
+++ b/.electron-vue/dev-runner.js
查看文件 @37036de
@@ -71,6 +71,7 @@ function startRenderer() {
       if (err) {
         reject("PortError:" + err)
       } else {
+        WebpackDevServer.addDevServerEntrypoints(rendererConfig, {});
         const compiler = webpack(rendererConfig)
         hotMiddleware = webpackHotMiddleware(compiler, {
           log: false,
@@ -91,6 +92,10 @@ function startRenderer() {
           compiler, {
           contentBase: path.join(__dirname, '../'),
           quiet: true,
+          stats: {
+            colors: true,
+
+          },
           before(app, ctx) {
             app.use(hotMiddleware)
             ctx.middleware.waitUntilValid(() => {
--- a/.electron-vue/utils.js 0 → 100644
查看文件 @37036de
+++ b/.electron-vue/utils.js 0 → 100644
查看文件 @37036de
+'use strict'
+const MiniCssPlugin = require('mini-css-extract-plugin');
+
+exports.cssLoaders = function (options) {
+    options = options || {}
+
+    const cssLoader = {
+        loader: 'css-loader',
+        options: {
+            sourceMap: options.sourceMap,
+            esModule: false
+        }
+    }
+
+    // 这里就是生成loader和其对应的配置
+    function generateLoaders(loader, loaderOptions) {
+        const loaders = [cssLoader]
+
+        if (loader) {
+            loaders.push({
+                loader: loader + '-loader',
+                options: Object.assign({}, loaderOptions, {
+                    sourceMap: options.sourceMap
+                })
+            })
+        }
+
+        // 当配置信息中开启此项时，启用css分离压缩
+        // 这一项在生产环境时，是默认开启的
+        if (options.extract) {
+            return [MiniCssPlugin.loader].concat(loaders)
+        } else {
+            // 如果不开启则让vue-style-loader来处理
+            return ['vue-style-loader'].concat(loaders)
+        }
+    }
+
+    // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+    return {
+        css: generateLoaders(),
+        postcss: generateLoaders(),
+        less: generateLoaders('less'),
+        sass: generateLoaders('sass', { indentedSyntax: true }),
+        scss: generateLoaders('sass'),
+        stylus: generateLoaders('stylus'),
+        styl: generateLoaders('stylus')
+    }
+}
+
+// 根据上面的函数遍历出来的各个css预处理器的loader进行最后的拼装
+exports.styleLoaders = function (options) {
+    const output = []
+    const loaders = exports.cssLoaders(options)
+
+
+    for (const extension in loaders) {
+        const loader = loaders[extension]
+        output.push({
+            test: new RegExp('\\.' + extension + '$'),
+            use: loader
+        })
+    }
+
+    return output
+}
--- a/.electron-vue/webpack.main.config.js
查看文件 @37036de
+++ b/.electron-vue/webpack.main.config.js
查看文件 @37036de
@@ -20,22 +20,6 @@ let mainConfig = {
   ],
   module: {
     rules: [
-      // {
-      //   test: /\.(js)$/,
-      //   enforce: 'pre',
-      //   exclude: /node_modules/,
-      //   use: {
-      //     loader: 'eslint-loader',
-      //     options: {
-      //       formatter: require('eslint-friendly-formatter')
-      //     }
-      //   }
-      // },
-      // {
-      //   test: /\.js$/,
-      //   use: 'happypack/loader?id=MainHappyBabel',
-      //   exclude: /node_modules/
-      // },
       {
         test: /\.ts$/,
         use: [{
--- a/.electron-vue/webpack.renderer.config.js
查看文件 @37036de
+++ b/.electron-vue/webpack.renderer.config.js
查看文件 @37036de
@@ -6,13 +6,16 @@ const path = require('path')
 const { dependencies } = require('../package.json')
 const webpack = require('webpack')
 const config = require('../config')
+const { styleLoaders } = require('./utils')
 const IsWeb = process.env.ENV_TARGET === 'web'
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin');
+// const ESLintPlugin = require('eslint-webpack-plugin');
 const { VueLoaderPlugin } = require('vue-loader')
+
 function resolve(dir) {
   return path.join(__dirname, '..', dir)
 }
@@ -26,7 +29,7 @@ function resolve(dir) {
 let whiteListedModules = IsWeb ? [] : ['vue', "element-ui"]
 let rendererConfig = {
-  devtool: '#cheap-module-eval-source-map',
+  devtool: 'eval-source-map',
   entry: {
     renderer: resolve('src/renderer/main.js')
   },
@@ -35,57 +38,9 @@ let rendererConfig = {
   ],
   module: {
     rules: [
-      // {
-      //   test: /\.(js|vue)$/,
-      //   enforce: 'pre',
-      //   exclude: /node_modules/,
-      //   use: {
-      //     loader: 'eslint-loader',
-      //     options: {
-      //       formatter: require('eslint-friendly-formatter')
-      //     }
-      //   }
-      // },
-      {
-        test: /\.scss$/,
-        use: ['vue-style-loader',
-          {
-            loader: 'css-loader',
-            options: {
-              esModule: false
-            }
-          },
-          'sass-loader']
-      },
-      {
-        test: /\.sass$/,
-        use: ['vue-style-loader',
-          {
-            loader: 'css-loader',
-            options: {
-              esModule: false
-            }
-          }, 'sass-loader?indentedSyntax']
-      },
-      {
-        test: /\.less$/,
-        use: ['vue-style-loader',
-          {
-            loader: 'css-loader',
-            options: {
-              esModule: false
-            }
-          }, 'less-loader']
-      },
-      {
-        test: /\.css$/,
-        use: ['vue-style-loader',
       {
-            loader: 'css-loader',
+        test: /\.vue$/,
-            options: {
+        loader: "vue-loader"
-              esModule: false
-            }
-          }]
       },
       {
         test: /\.html$/,
@@ -102,20 +57,6 @@ let rendererConfig = {
         exclude: /node_modules/
       },
       {
-        test: /\.node$/,
-        use: 'node-loader'
-      },
-      {
-        test: /\.vue$/,
-        use: {
-          loader: 'vue-loader',
-          options: {
-            cacheDirectory: 'node_modules/.cache/vue-loader',
-            cacheIdentifier: '7270960a',
-          }
-        }
-      },
-      {
         test: /\.svg$/,
         loader: 'svg-sprite-loader',
         include: [resolve('src/renderer/icons')],
@@ -124,35 +65,24 @@ let rendererConfig = {
         }
       },
       {
-        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        test: /\.(png|jpe?g|gif)(\?.*)?$/,
-        exclude: [resolve('src/renderer/icons')],
+        type: "asset/resource",
-        use: {
+        generator: {
-          loader: 'url-loader',
+          filename: 'imgs/[name]--[hash].[ext]'
-          query: {
-            esModule: false,
-            limit: 10000,
-            name: 'imgs/[name]--[folder].[ext]'
         }
       },
-      },
       {
         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
-        loader: 'url-loader',
+        type: "asset/resource",
-        options: {
+        generator: {
-          esModule: false,
+          filename: 'media/[name]--[hash].[ext]'
-          limit: 10000,
-          name: 'media/[name]--[folder].[ext]'
         }
       },
       {
         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        use: {
+        type: "asset/resource",
-          loader: 'url-loader',
+        generator: {
-          query: {
+          filename: 'fonts/[name]--[hash].[ext]'
-            esModule: false,
-            limit: 10000,
-            name: 'fonts/[name]--[folder].[ext]'
-          }
         }
       }
     ]
@@ -209,6 +139,8 @@ let rendererConfig = {
   },
   target: 'electron-renderer'
 }
+// 将css相关得loader抽取出来
+rendererConfig.module.rules = rendererConfig.module.rules.concat(styleLoaders({ sourceMap: config.dev.cssSourceMap }))
 /**
  * Adjust rendererConfig for development settings
@@ -226,8 +158,6 @@ if (process.env.NODE_ENV !== 'production' && !IsWeb) {
  * Adjust rendererConfig for production settings
  */
 if (process.env.NODE_ENV === 'production') {
-  rendererConfig.devtool = ''
-
   rendererConfig.plugins.push(
     new CopyWebpackPlugin({
       patterns: [
@@ -252,8 +182,6 @@ if (process.env.NODE_ENV === 'production') {
       new TerserPlugin({
         test: /\.js(\?.*)?$/i,
         extractComments: false,
-        cache: true,
-        sourceMap: false,
         terserOptions: {
           warnings: false,
           compress: {
@@ -270,7 +198,7 @@ if (process.env.NODE_ENV === 'production') {
             drop_debugger: true,
             pure_funcs: ['console.log']
           },
-        }
+        },
       })]
   }
   if (IsWeb) {
@@ -298,6 +226,9 @@ if (process.env.NODE_ENV === 'production') {
     }
     rendererConfig.optimization.runtimeChunk = { name: 'runtime' }
   }
+} else {
+  // eslint
+  // rendererConfig.plugins.push(new ESLintPlugin(config.dev.ESLintoptions))
 }
 module.exports = rendererConfig
--- a/.gitignore
查看文件 @37036de
+++ b/.gitignore
查看文件 @37036de
@@ -14,5 +14,5 @@ yarn-error.log*
 *.ntvs*
 *.njsproj
 *.sln
-electron-vue-template-ts.7z
 server/client/electron-vue-admin Setup 0.0.1.exe
+/build/builder-effective-config.yaml
--- a/config/index.js
查看文件 @37036de
+++ b/config/index.js
查看文件 @37036de
@@ -7,7 +7,11 @@ module.exports = {
     env: require('./dev.env'),
     removeElectronJunk: true,
     chineseLog: false,
-    port: 9080
+    port: 9080,
+    ESLintoptions:{
+      formatter: require('eslint-friendly-formatter')
+    },
+    cssSourceMap: true
   },
   UseStartupChart: true,
   IsUseSysTitle: true,
--- a/package.json
查看文件 @37036de
+++ b/package.json
查看文件 @37036de
@@ -6,7 +6,7 @@
   "license": "MIT",
   "main": "./dist/electron/main.js",
   "scripts": {
-    "dev": "cross-env BUILD_TARGET=clean node .electron-vue/build.js &&  node .electron-vue/dev-runner.js",
+    "dev": "node .electron-vue/dev-runner.js",
     "build": "cross-env BUILD_TARGET=clean node .electron-vue/build.js && node .electron-vue/build.js && electron-builder",
     "build:win32": "cross-env BUILD_TARGET=clean node .electron-vue/build.js && node .electron-vue/build.js && electron-builder --win  --ia32",
     "build:win64": "cross-env BUILD_TARGET=clean node .electron-vue/build.js && node .electron-vue/build.js && electron-builder --win  --x64",
@@ -19,7 +19,7 @@
     "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
     "update:serve": "node server/index.js",
     "dep:upgrade": "yarn upgrade-interactive --latest",
-    "postinstall": "install-app-deps"
+    "postinstall": "electron-builder install-app-deps"
   },
   "build": {
     "extraFiles": [],
@@ -66,7 +66,7 @@
   },
   "dependencies": {
     "axios": "^0.21.1",
-    "date-fns": "^2.16.1",
+    "date-fns": "^2.17.0",
     "electron-updater": "^4.3.5",
     "element-ui": "^2.15.0",
     "express": "^4.17.1",
@@ -74,79 +74,75 @@
     "js-cookie": "^2.2.1",
     "nprogress": "^0.2.0",
     "vue": "^2.6.12",
-    "vue-router": "^3.4.9",
+    "vue-router": "^3.5.1",
-    "vuex": "^3.6.0"
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.10",
+    "@babel/core": "^7.12.13",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/eslint-parser": "^7.12.13",
-    "@babel/plugin-proposal-decorators": "^7.12.12",
+    "@babel/plugin-proposal-class-properties": "^7.12.13",
-    "@babel/plugin-proposal-do-expressions": "^7.12.1",
+    "@babel/plugin-proposal-decorators": "^7.12.13",
-    "@babel/plugin-proposal-export-default-from": "^7.12.1",
+    "@babel/plugin-proposal-do-expressions": "^7.12.13",
-    "@babel/plugin-proposal-export-namespace-from": "^7.12.1",
+    "@babel/plugin-proposal-export-default-from": "^7.12.13",
-    "@babel/plugin-proposal-function-bind": "^7.12.1",
+    "@babel/plugin-proposal-export-namespace-from": "^7.12.13",
-    "@babel/plugin-proposal-function-sent": "^7.12.1",
+    "@babel/plugin-proposal-function-bind": "^7.12.13",
-    "@babel/plugin-proposal-json-strings": "^7.12.1",
+    "@babel/plugin-proposal-function-sent": "^7.12.13",
-    "@babel/plugin-proposal-logical-assignment-operators": "^7.12.1",
+    "@babel/plugin-proposal-json-strings": "^7.12.13",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.12.13",
-    "@babel/plugin-proposal-numeric-separator": "^7.12.7",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.13",
-    "@babel/plugin-proposal-optional-chaining": "^7.12.7",
+    "@babel/plugin-proposal-numeric-separator": "^7.12.13",
-    "@babel/plugin-proposal-pipeline-operator": "^7.12.1",
+    "@babel/plugin-proposal-optional-chaining": "^7.12.13",
-    "@babel/plugin-proposal-throw-expressions": "^7.12.1",
+    "@babel/plugin-proposal-pipeline-operator": "^7.12.13",
+    "@babel/plugin-proposal-throw-expressions": "^7.12.13",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
-    "@babel/plugin-transform-runtime": "^7.12.10",
+    "@babel/plugin-transform-runtime": "^7.12.15",
     "@babel/polyfill": "^7.12.1",
-    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-env": "^7.12.13",
-    "@babel/register": "^7.12.10",
+    "@babel/register": "^7.12.13",
-    "@babel/runtime": "^7.12.5",
+    "@babel/runtime": "^7.12.13",
     "@types/fs-extra": "^9.0.6",
-    "@types/node": "^14.14.22",
+    "@types/node": "^14.14.25",
-    "ajv": "^6.12.6",
+    "ajv": "^7.0.4",
-    "babel-eslint": "^9.0.0",
     "babel-loader": "^8.2.2",
-    "cache-loader": "^4.1.0",
     "cfonts": "^2.9.1",
     "chalk": "^4.0.0",
-    "copy-webpack-plugin": "^6.3.2",
+    "copy-webpack-plugin": "^7.0.0",
+    "core-js": "^3.8.3",
     "cross-env": "^7.0.3",
     "css-loader": "^5.0.1",
     "del": "^6.0.0",
-    "electron": "^11.2.1",
+    "electron": "^11.2.3",
     "electron-builder": "^22.9.1",
     "electron-devtools-installer": "^3.1.1",
-    "eslint": "^6.8.0",
+    "eslint": "^7.19.0",
-    "eslint-config-standard": "^14.1.1",
+    "eslint-config-standard": "^16.0.2",
     "eslint-friendly-formatter": "^4.0.1",
-    "eslint-loader": "^3.0.4",
     "eslint-plugin-html": "^6.1.1",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-node": "^9.2.0",
+    "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.1.0",
+    "eslint-webpack-plugin": "^2.5.0",
-    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.0.0",
-    "html-webpack-plugin": "^4.5.1",
+    "mini-css-extract-plugin": "1.3.5",
-    "mini-css-extract-plugin": "1.3.4",
     "multispinner": "^0.2.1",
     "node-loader": "^1.0.2",
     "portfinder": "^1.0.28",
-    "sass": "^1.32.5",
+    "sass": "^1.32.6",
-    "sass-loader": "^10.1.1",
+    "sass-loader": "^11.0.0",
     "split2": "^3.2.2",
     "style-loader": "^2.0.0",
     "svg-sprite-loader": "^5.2.1",
-    "terser-webpack-plugin": "^4.2.3",
+    "terser-webpack-plugin": "^5.1.1",
     "thread-loader": "^3.0.1",
-    "through2-filter": "^3.0.0",
+    "ts-loader": "^8.0.15",
-    "ts-loader": "^8.0.14",
     "typescript": "^4.1.3",
-    "url-loader": "^4.1.1",
     "vue-html-loader": "^1.2.4",
     "vue-loader": "^15.9.6",
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.6.12",
-    "webpack": "^4.44.2",
+    "webpack": "^5.21.2",
-    "webpack-cli": "^3.3.12",
+    "webpack-cli": "^4.5.0",
     "webpack-dev-server": "^3.11.2",
     "webpack-hot-middleware": "^2.25.0",
     "webpack-merge": "^5.7.3"
--- a/src/main/config/menu.ts
查看文件 @37036de
+++ b/src/main/config/menu.ts
查看文件 @37036de
 // 这里是定义菜单的地方，详情请查看 https://electronjs.org/docs/api/menu
 import { dialog } from 'electron'
 import { type, arch, release } from 'os'
-import { version } from '../../../package.json'
+import packageInfo from '../../../package.json'
 const menu = [
   {
@@ -24,12 +24,12 @@ const menu = [
       }
     }]
   }]
-function info () {
+function info() {
   dialog.showMessageBox({
     title: '关于',
     type: 'info',
     message: 'electron-Vue框架',
-    detail: `版本信息：${version}\n引擎版本：${process.versions.v8}\n当前系统：${type()} ${arch()} ${release()}`,
+    detail: `版本信息：${packageInfo.version}\n引擎版本：${process.versions.v8}\n当前系统：${type()} ${arch()} ${release()}`,
     noLink: true,
     buttons: ['查看github', '确定']
   })
--- a/src/main/services/downloadFile.ts
查看文件 @37036de
+++ b/src/main/services/downloadFile.ts
查看文件 @37036de
@@ -2,7 +2,7 @@ import { app, ipcMain, BrowserWindow, dialog } from 'electron'
 import { join } from 'path'
 import { arch, platform } from 'os'
 import { stat, remove } from 'fs-extra'
-import { version } from '../../../package.json'
+import packageInfo from '../../../package.json'
 /**
@@ -19,7 +19,7 @@ class Main {
   public mainWindow: BrowserWindow = null
   public downloadUrl: string = ""
-  public version: string = version
+  public version: string = packageInfo.version
   public baseUrl: string = ''
   public Sysarch: string = arch().includes('64') ? 'win64' : 'win32'
   public HistoryFilePath = join(app.getPath('downloads'), platform().includes('win32') ? `electron_${this.version}_${this.Sysarch}.exe` : `electron_${this.version}_mac.dmg`)
--- a/yarn.lock
查看文件 @37036de
+++ b/yarn.lock
查看文件 @37036de