webpack5 升级

 升级依赖 
升级依赖https://blog.youkuaiyun.com/qq_36131788/article/details/121360686配置文件修改https://blog.youkuaiyun.com/sugerinaflat/article/details/120996095?spm=1001.2101.3001.6650.13&utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~default-13.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~default-13.pc_relevant_default&utm_relevant_index=19

插件应用

eslint-webpack-plugin

官方说明文档https://webpack.js.org/plugins/eslint-webpack-plugin/

const ESLintPlugin = require('eslint-webpack-plugin')
    new ESLintPlugin({
      extensions: [`js`, `vue`], // 指定应检查的扩展名
      // cache: true, 
      // fix: true, // 是否自动修复错误,开启后将改变源文件
      failOnError: false, // 如果有任何错误将导致模块构建失败
      // formatter: require('eslint-friendly-formatter'),  // 等同于eslint-loader下option formatter
      emitWarning: config.dev.showEslintErrorsInOverlay,
      useEslintrc: true,
    })

 优化控制台显示。   friendly-errors-webpack-plugin
 配置文件同级添加

// 除了初始启动信息外，什么都不会写入控制台。 这也意味着来自webpack的错误或警告是不可见的。
stats: {
    preset: 'errors-only'
  },
devServer: {}

friendly-errors-webpack-pluginhttps://blog.youkuaiyun.com/qq_34086980/article/details/113603857

打包 CommonsChunkPlugin 文件分割配置修改。splitChunks

  optimization: {
    minimize: true,
    concatenateModules: true,
    mangleWasmImports: true,
    removeAvailableModules: false,
    minimizer: [
      new TerserWebpackPlugin({
        parallel: 4,
        extractComments: true,
        terserOptions: {
          compress: {
            warnings: false,
            drop_console: true,
            drop_debugger: true,
            pure_funcs: ['console.log'] //移除console
          }
        }
      }),
      new CssMinimizerPlugin(),
    ],
    runtimeChunk: { name: 'manifest' },
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/].*\.js$/,
          name: 'vendor',
          chunks: 'initial',
          enforce: true,
        }
    },
    // hashed
    moduleIds: 'deterministic'
  },

 package.json

{
  "name": "test",
  "version": "v1.0.10",
  "description": "A Vue.js project",
  "author": "ll",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_OPTIONS=--max-old-space-size=8196 NODE_ENV=development webpack server --progress --config build/webpack.dev.conf.js",
    "build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.conf.js",
    "hot": "cross-env NODE_ENV=development webpack server --inline  --config build/webpack.dev.conf.js --hot",
    "start": "webpack serve --open",
    "watch": "webpack --watch",
    "server": "node server.js",
    "check": "cross-env npm-check",
    "serve": "npx webpack serve --config webpack.config.js --color --progress"
  },
  "dependencies": {
    "@babel/runtime": "^7.15.3",
    "@babel/runtime-corejs2": "^7.15.3",
    "axios": "^0.18.0",
    "dhtmlx-gantt": "^6.1.6",
    "diff": "^5.0.0",
    "echarts": "^5.1.2",
    "element-ui": "^2.15.8",
    "es6-promise": "^4.1.1",
    "exif-js": "^2.3.0",
    "file-saver": "^1.3.3",
    "jquery": "^3.5.1",
    "lodash": "^4.17.15",
    "npm-check": "^5.9.2",
    "promise.prototype.finally": "^3.1.0",
    "raven-js": "^3.26.3",
    "sortablejs": "^1.13.0",
    "vue": "2.6.11",
    "vue-baidu-map": "^0.12.2",
    "vue-grid-layout": "2.3.7",
    "vue-image-crop-upload": "^2.5.0",
    "vue-meta": "^1.5.8",
    "vue-orgchart": "^1.1.7",
    "vue-qr": "^4.0.6",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1",
    "vuex-persistedstate": "^4.1.0",
    "xlsx": "^0.18.5",
    "xlsx-js-style": "^1.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.17.10",
    "@babel/plugin-transform-runtime": "^7.0.0",
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.17.10",
    "@babel/eslint-parser": "^7.17.0",
    "babel-plugin-dynamic-import-node": "^2.3.3",
    "autoprefixer": "^7.1.2",
    "babel-loader": "^8.0.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "chalk": "^2.0.1",
    "cross-env": "^7.0.2",
    "css-loader": "^5.2.7",
    "css-minimizer-webpack-plugin": "^3.4.1",
    "eslint": "^8.14.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^8.7.1",
    "eslint-webpack-plugin": "^3.1.1",
    "express": "^4.18.1",
    "filemanager-webpack-plugin": "^2.0.5",
    "html-webpack-plugin": "^5.4.0",
    "increase-memory-limit": "^1.0.7",
    "mini-css-extract-plugin": "^2.4.3",
    "node-notifier": "^5.1.2",
    "ora": "^1.2.0",
    "portfinder": "^1.0.28",
    "rimraf": "^2.6.0",
    "sass": "1.32.0",
    "sass-loader": "^8.0.2",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "source-map": "^0.7.3",
    "style-loader": "^3.3.1",
    "stylus": "^0.54.8",
    "stylus-loader": "^3.0.2",
    "vue-loader": "^15.9.8",
    "vue-style-loader": "^4.1.3",
    "vue-template-compiler": "2.6.11",
    "vuedraggable": "^2.17.0",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "compression-webpack-plugin": "^10.0.0",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.0",
    "webpack-dev-middleware": "^5.3.1",
    "webpack-dev-server": "^4.8.1",
    "webpack-merge": "^5.7.3",
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^4.0.1",
    "webpack-sentry-plugin": "^2.0.3",
    "webpack-bundle-analyzer": "^4.5.0"
  },
  "engines": {
    "node": ">= 14.16.1",
    "npm": ">= 6.14.12"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "main": ".eslintrc.js",
  "keywords": [],
  "license": "ISC"
}