pref: webpack3.6.0升级4.46.0

nezha-fronted/build/utils.js

@@ -1,8 +1,9 @@
 'use strict'
 const path = require('path')
 const config = require('../config')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+//const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const packageConfig = require('../package.json')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 exports.assetsPath = function (_path) {
   const assetsSubDirectory = process.env.NODE_ENV === 'production'
@@ -45,11 +46,12 @@ exports.cssLoaders = function (options) {
     // Extract CSS when that option is specified
     // (which is the case during production build)
     if (options.extract) {
-      return ExtractTextPlugin.extract({
+      /*return ExtractTextPlugin.extract({
         use: loaders,
         fallback: 'vue-style-loader',
         publicPath: '../../'
-      })
+      })*/
+      return [MiniCssExtractPlugin.loader].concat(loaders)
     } else {
       return ['vue-style-loader'].concat(loaders)
     }

nezha-fronted/build/webpack.base.conf.js

@@ -3,6 +3,7 @@ const path = require('path')
 const utils = require('./utils')
 const config = require('../config')
 const vueLoaderConfig = require('./vue-loader.conf')
+// const VueLoaderPlugin = require('vue-loader/lib/plugin')
 const arg = process.env.BUILD_MODE
 const devStart = process.env.npm_lifecycle_event
 function resolve (dir) {
@@ -86,6 +87,9 @@ const baseConfig = {
       }
     ]
   },
+  //  plugins: [
+  //    new VueLoaderPlugin()
+  //  ],
   node: {
     // prevent webpack from injecting useless setImmediate polyfill because Vue
     // source contains it (although only uses it if it's native).

nezha-fronted/build/webpack.dev.conf.js

@@ -16,6 +16,7 @@ const devStart = process.env.npm_lifecycle_event
 const indexHtml = devStart === 'dev' ? 'src/entrance/app/index.html' : 'src/entrance/exportHtml/exportHtml.html'
 let devWebpackConfig = ''
 devWebpackConfig = merge(baseWebpackConfig, {
+  mode: 'development',
   module: {
     rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
   },

nezha-fronted/build/webpack.prod.conf.js

@@ -8,9 +8,9 @@ const merge = require('webpack-merge')
 const baseWebpackConfig = require('./webpack.base.conf')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+//const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
-// const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
+ const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
 const fileManagerPlugin = require('filemanager-webpack-plugin')
 const WebpackZipPlugin = require('webpack-zip-plugin')
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
@@ -19,6 +19,12 @@ const GenerateAssetPlugin = require('generate-asset-webpack-plugin')
 const WebpackShellPlugin = require('webpack-shell-plugin')
 const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
 const serverConfig = require('../static/config.json')// 引入根目录下的配置文件
+const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const TerserPlugin = require('terser-webpack-plugin')
+const smp = new SpeedMeasurePlugin();
+
 
 // const gitRevisionPlugin = new GitRevisionPlugin();
 const createJson = function () {
@@ -37,6 +43,7 @@ const createConfig = function(compilation){
 let webpackConfig = {}
 if (arg === 'html') {
   webpackConfig = merge(baseWebpackConfig, {
+    mode: 'production',
     module: {
       rules: utils.styleLoaders({
         sourceMap: config.build.productionSourceMap,
@@ -65,6 +72,10 @@ if (arg === 'html') {
       new webpack.DefinePlugin({
         'process.env': env
       }),
+      new MiniCssExtractPlugin({
+        filename: utils.assetsPath('css/[name].[contenthash].css'),
+        chunkFilename: "[name].[contenthash].css"
+      }),
       new UglifyJsPlugin({
         uglifyOptions: {
           compress: {
@@ -78,14 +89,14 @@ if (arg === 'html') {
         parallel: true
       }),
       // extract css into its own file
-      new ExtractTextPlugin({
+      /*new ExtractTextPlugin({
         filename: utils.assetsPath('css/[name].[contenthash].css'),
         // Setting the following option to `false` will not extract CSS from codesplit chunks.
         // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
         // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
         // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
         allChunks: true
-      }),
+      }),*/
       // Compress extracted CSS. We are using this plugin so that possible
       // duplicated CSS from different components can be deduped.
       new OptimizeCSSPlugin({
@@ -123,11 +134,11 @@ if (arg === 'html') {
           minifyJS: true // 压缩文内js
         },
         // necessary to consistently work with multiple chunks via CommonsChunkPlugin
-        chunksSortMode: 'dependency',
+        chunksSortMode: 'auto',
         chunks: ['exportHtml'],
         excludeChunks: ['app']
       }),
-      new HtmlWebpackInlineSourcePlugin(),
+      new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
       new GenerateAssetPlugin({
         filename: 'static/config.json',
         fn: (compilation, cb) => {
@@ -177,9 +188,26 @@ if (arg === 'html') {
         }
       ])
     ]
+    // optimization: {
+    //   minimizer: [
+    //     new CssMinimizerPlugin(), // 去重压缩css
+    //     new TerserPlugin({ // 压缩JS代码
+    //       terserOptions: {
+    //         compress: {
+    //         warnings: false,
+    //         drop_console: true,  // 去除console
+    //         pure_funcs: ['console.log']
+    //         }
+    //       },
+    //       exclude: /manifest.+js/,
+    //       sourceMap: config.build.productionSourceMap,
+    //     })
+    //   ]
+    // }
   })
 } else if (arg === 'app') {
   webpackConfig = merge(baseWebpackConfig, {
+    mode: 'production',
     module: {
       rules: utils.styleLoaders({
         sourceMap: config.build.productionSourceMap,
@@ -209,7 +237,11 @@ if (arg === 'html') {
       new webpack.DefinePlugin({
         'process.env': env
       }),
-      new UglifyJsPlugin({
+      new MiniCssExtractPlugin({  //替换 ExtractTextPlugin 用于css抽取
+        filename: utils.assetsPath('css/[name].[contenthash].css')
+        // chunkFilename: "[name].[contenthash].css"
+      }),
+     /* new UglifyJsPlugin({
         uglifyOptions: {
           compress: {
             warnings: false,
@@ -220,23 +252,23 @@ if (arg === 'html') {
         exclude: /manifest.+js/,
         sourceMap: config.build.productionSourceMap,
         parallel: true
-      }),
+      }),*/
       // extract css into its own file
-      new ExtractTextPlugin({
+      /*new ExtractTextPlugin({
-        filename: utils.assetsPath('css/[name].[contenthash].css'),
+        filename: utils.assetsPath('css/[name]_[md5:contenthash:hex:8].css'),
         // Setting the following option to `false` will not extract CSS from codesplit chunks.
         // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
         // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
         // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
         allChunks: true
-      }),
+      }),*/
       // Compress extracted CSS. We are using this plugin so that possible
       // duplicated CSS from different components can be deduped.
-      new OptimizeCSSPlugin({
+      // new OptimizeCSSPlugin({
-        cssProcessorOptions: config.build.productionSourceMap
+      //   cssProcessorOptions: config.build.productionSourceMap
-          ? { safe: true, map: { inline: false } }
+      //     ? { safe: true, map: { inline: false } }
-          : { safe: true }
+      //     : { safe: true }
-      }),
+      // }),
       // generate dist index.html with correct asset hash for caching.
       // you can customize output by editing /index.html
       // see https://github.com/ampedandwired/html-webpack-plugin
@@ -254,7 +286,7 @@ if (arg === 'html') {
           // https://github.com/kangax/html-minifier#options-quick-reference
         },
         // necessary to consistently work with multiple chunks via CommonsChunkPlugin
-        chunksSortMode: 'dependency',
+        //chunksSortMode: 'auto',
         excludeChunks: ['exportHtml']
       }),
       new GenerateAssetPlugin({
@@ -268,7 +300,7 @@ if (arg === 'html') {
       // enable scope hoisting
       new webpack.optimize.ModuleConcatenationPlugin(),
       // split vendor js into its own file
-      new webpack.optimize.CommonsChunkPlugin({
+     /* new webpack.optimize.CommonsChunkPlugin({
         name: 'vendor',
         minChunks (module) {
           // any required modules inside node_modules are extracted to vendor
@@ -295,7 +327,7 @@ if (arg === 'html') {
         async: 'vendor-async',
         children: true,
         minChunks: 3
-      }),
+      }),*/
 
       // copy custom static assets
       new CopyWebpackPlugin([
@@ -305,7 +337,33 @@ if (arg === 'html') {
           ignore: ['*']
         }
       ])
-    ]
+    ],
+    optimization: {
+      minimizer: [
+        new CssMinimizerPlugin(), // 去重压缩css
+        new TerserPlugin({ // 压缩JS代码
+          terserOptions: {
+            compress: {
+            warnings: false,
+            drop_console: true,  // 去除console
+            pure_funcs: ['console.log']
+            }
+          },
+          exclude: /manifest.+js/,
+          sourceMap: config.build.productionSourceMap,
+        })
+      ],
+      splitChunks: { //
+        chunks: 'async',
+        minSize: 30000,
+        maxSize: 0,
+        minChunks: 1,
+        maxAsyncRequests: 5,
+        maxInitialRequests: 3,
+        automaticNameDelimiter: '~',
+        automaticNameMaxLength: 30,
+      }
+    }
   })
 }
 if (process.env.NODE_ENV == 'development') {
@@ -411,4 +469,6 @@ if (config.build.bundleAnalyzerReport) {
   webpackConfig.plugins.push(new BundleAnalyzerPlugin())
 }
 
+webpackConfig = smp.wrap(webpackConfig);
+
 module.exports = webpackConfig

nezha-fronted/package.json

@@ -37,6 +37,7 @@
     "browserslist": "^4.21.4",
     "caniuse-lite": "^1.0.30001412",
     "codemirror-promql": "^0.19.0",
+    "css-minimizer-webpack-plugin": "^1.0.0",
     "cytoscape": "^3.15.2",
     "d3": "^6.7.0",
     "d3-hexbin": "^0.2.2",
@@ -45,7 +46,9 @@
     "echarts": "^5.2.2",
     "element-ui": "^2.15.3",
     "file-saver": "^2.0.2",
-    "html-webpack-inline-source-plugin": "0.0.10",
+    "happypack": "^5.0.1",
+    "html-webpack-inline-source-plugin": "^1.0.0-beta.2",
+    "html-webpack-plugin": "^4.2.0",
     "html2canvas": "^1.4.1",
     "intro.js": "^5.1.0",
     "jspdf": "^2.5.1",
@@ -53,14 +56,15 @@
     "le5le-store": "^1.0.7",
     "leaflet": "^1.7.1",
     "maplibre-gl": "^2.2.0",
+    "mini-css-extract-plugin": "^1.6.0",
     "moment-timezone": "^0.5.33",
     "mqtt": "4.2.6",
-    "node-sass": "^4.14.1",
     "pl-table": "^2.5.8",
     "preload": "^0.1.0",
     "qrcodejs2": "0.0.2",
     "quill": "^1.3.7",
     "spark-md5": "^3.0.2",
+    "speed-measure-webpack-plugin": "^1.5.0",
     "v-selectpage": "^2.1.4",
     "vue": "^2.5.2",
     "vue-clipboard2": "^0.3.3",
@@ -83,10 +87,10 @@
     "@babel/plugin-transform-modules-commonjs": "^7.17.9",
     "@vue/test-utils": "^1.0.0-beta.13",
     "autoprefixer": "^7.1.2",
-    "babel-core": "^6.26.0",
+    "babel-core": "^6.26.3",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-jest": "^23.6.0",
-    "babel-loader": "^7.1.1",
+    "babel-loader": "^7.1.5",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "babel-plugin-transform-runtime": "^6.22.0",
@@ -95,47 +99,49 @@
     "babel-preset-stage-2": "^6.22.0",
     "chalk": "^2.0.1",
     "copy-webpack-plugin": "^4.0.1",
-    "css-loader": "^0.28.0",
+    "css-loader": "^3.5.3",
     "eslint": "^7.22.0",
     "eslint-config-standard": "^16.0.2",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.3.1",
     "eslint-plugin-vue": "^7.7.0",
-    "extract-text-webpack-plugin": "^3.0.0",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
-    "file-loader": "^1.1.4",
+    "file-loader": "^5.1.0",
     "filemanager-webpack-plugin": "^2.0.5",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "generate-asset-webpack-plugin": "^0.3.0",
     "git-revision-webpack-plugin": "^3.0.6",
-    "html-webpack-plugin": "^2.30.1",
     "jest": "^24.0.0",
     "jest-serializer-vue": "^0.3.0",
     "jest-transform-stub": "^2.0.0",
     "lodash": "^4.17.21",
     "node-notifier": "^5.1.2",
+    "node-sass": "^4.0.0",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.2.0",
     "perfect-scrollbar": "^1.5.0",
     "portfinder": "^1.0.13",
     "postcss-import": "^11.0.0",
-    "postcss-loader": "^2.0.8",
+    "postcss-loader": "^4.0.0",
     "postcss-url": "^7.2.1",
     "rimraf": "^2.6.0",
-    "sass-loader": "^7.3.1",
+    "sass-loader": "^8.0.1",
     "sass-resources-loader": "^2.0.1",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
+    "terser-webpack-plugin": "^4.2.3",
     "uglifyjs-webpack-plugin": "^1.1.1",
-    "url-loader": "^0.5.8",
+    "url-loader": "^3.0.0",
     "vue-jest": "^1.0.2",
-    "vue-loader": "^13.3.0",
+    "vue-loader": "^14.2.2",
     "vue-resource": "^1.5.1",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.5.2",
-    "webpack": "3.6.0",
+    "webpack": "^4.46.0",
     "webpack-bundle-analyzer": "^2.9.0",
-    "webpack-dev-server": "^2.9.1",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.1",
     "webpack-merge": "^4.1.0",
     "webpack-parallel-uglify-plugin": "1.1.4",
     "webpack-shell-plugin": "^0.5.0",

nezha-fronted/src/components/page/config/about.vue

@@ -1,12 +1,7 @@
 <template>
   <div class="about">
     <div class="app">
-       <div class="app-header">
+      
-      <div class="header-logo"><img width="60" height="60" src="../../../assets/img/logo1-2.png"></div>
-      <div class="header-title">
-        <div class="app-name">{{version.nezha.name}}</div>
-        <div class="app-version"><span class="about-label">{{$t("overall.version")}}&nbsp;&nbsp;&nbsp;</span><span>{{version.nezha.version}}</span></div>
-      </div>
     </div>
     <div class="app-component">
       <div class="component-content">