chore: 升级webpack5

config/config.js

-const { join } = require('path');
+
 const proxy = require('./proxy');
 const slash = require('slash2');
 const defaultSetting = require('./defaultSetting');
-function resolve (dir) {
-  return join(__dirname, '../', dir)
-}
 const { REACT_APP_ENV } = process.env;
 module.exports = {
+  // mfsu: {},
+  webpack5: {},
   base: '/civbase',
   title: '熊猫智慧城市监控管理解决方案',
   hash: true,
@@ -29,8 +28,8 @@ module.exports = {
   // },
   ignoreMomentLocale: true,
   nodeModulesTransform: {
-    type: 'all',
-    // exclude: ['@wisdom-map/arcgismap', '@wisdom-map/arcgismap/lib/arcgisapi'],
+    type: 'none',
+    exclude: ['@wisdom-map/arcgismap', '@wisdom-map/arcgismap/lib/arcgisapi', 'swagger-ui-react'],
   },
   proxy: proxy[REACT_APP_ENV || 'dev'],
   // openAPI: {
@@ -77,5 +76,6 @@ module.exports = {
     },
     javascriptEnabled: true
   },
+  workerLoader: {}
   // esbuild: {}
 };

config/proxy.js

 /* eslint-disable */
 // const proxyURL = process.env.NODE_ENV !== 'production' ? 'http://192.168.10.150:8777' : window.location.origin;
 const proxyURL = 'http://192.168.10.156:8666';
+
 module.exports = {
   assetsRoot: process.env.NODE_ENV !== 'production' ? proxyURL : './',
   dev: {

internals/webpack/plugins/DevCompileDonePlugin.js

@@ -13,9 +13,6 @@ class DevCompileDonePlugin {
         if (process.env.SYSTEM_BELL !== 'none') {
           process.stdout.write('\x07');
         }
-        this.opts.onCompileFail && this.opts.onCompileFail({
-          stats,
-        });
         return;
       }
 
@@ -34,7 +31,6 @@ class DevCompileDonePlugin {
           copied = chalk.red(`(copy to clipboard failed)`);
         }
 
-        console.log();
         console.log(
           [
             `  App running at:`,
@@ -44,13 +40,17 @@ class DevCompileDonePlugin {
             .filter(Boolean)
             .join('\n'),
         );
+        process.send && process.send({
+              type: 'DONE'
+        });
+        isFirstCompile = false;
       }
 
 
-      this.opts.onCompileDone && this.opts.onCompileDone({
-          isFirstCompile,
-          stats,
-      });
+      // this.opts.onCompileDone && this.opts.onCompileDone({
+      //     isFirstCompile,
+      //     stats,
+      // });
       if(isFirstCompile) {
           isFirstCompile = false;
           // process.send({

internals/webpack/webpack.base.babel.js

@@ -103,15 +103,45 @@ module.exports = options => {
       useHash ? `[name].[contenthash:8].async.js` : `[name].js`,
     )
     .publicPath(`/${pkg.name.toLocaleLowerCase()}/`)
-    .futureEmitAssets(true)
+    // .futureEmitAssets(true)
     .crossOriginLoading('anonymous')
     .pathinfo(isDev || disableCompress);
 
+  if(!isWebpack5) {
+    chainConfig.output.futureEmitAssets(true)
+  }  
+  if(isWebpack5) {
+    chainConfig.cache({
+      type: 'filesystem',
+      buildDependencies: {
+        config: [
+          __filename,
+          path.join(process.cwd(), 'package.json')
+        ]
+      },
+      cacheDirectory: path.resolve(process.cwd(), 'node_modules/.cache')
+    })
+  }
   chainConfig.resolve.modules
     .add('node_modules')
     .add('src')
     .end()
-    .extensions.merge(['.js', '.jsx', '.react.js'])
+    .extensions.merge([
+      '.js', 
+      '.jsx', 
+      '.react.js', 
+      '.web.js',
+      '.wasm',
+      '.mjs',
+      '.js',
+      '.web.jsx',
+      '.jsx',
+      '.web.ts',
+      '.ts',
+      '.web.tsx',
+      '.tsx',
+      '.json'
+    ])
     .end()
     .mainFields.merge(['browser', 'jsnext:main', 'main']);
 
@@ -171,8 +201,7 @@ module.exports = options => {
     reactRequire: true,
     lockCoreJS3: {},
     import: (presetOpts.import || []).concat([
-      { libraryName: 'antd', libraryDirectory: 'es', style: true },
-      { libraryName: 'antd-mobile', libraryDirectory: 'es', style: true },
+      { libraryName: 'antd', libraryDirectory: 'es', style: true }
     ]),
   });
 
@@ -197,6 +226,7 @@ module.exports = options => {
       ]).end()
     .exclude
       .add(/node_modules/)
+      .add(/\.mfsu/)
     .end()
     .use('babel-loader')
     .loader(require.resolve('@umijs/deps/compiled/babel-loader'))
@@ -297,7 +327,7 @@ module.exports = options => {
       .rule('worker')
       .test(/.*worker.(ts|js)/)
       .use('worker-loader')
-        .loader(require.resolve('worker-loader'))
+        .loader(require.resolve('@umijs/deps/compiled/worker-loader'))
         .options(defineConfig.workerLoader);
   }  
 
@@ -315,20 +345,22 @@ module.exports = options => {
   if (defineConfig.externals) {
     chainConfig.externals(defineConfig.externals);
   }
-
-  chainConfig.node.merge({
-    setImmediate: false,
-    module: 'empty',
-    dns: 'mock',
-    http2: 'empty',
-    process: 'mock',
-    dgram: 'empty',
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty',
-    child_process: 'empty',
-    ...options.node,
-  });
+  if(!isWebpack5) {
+    chainConfig.node.merge({
+      setImmediate: false,
+      module: 'empty',
+      dns: 'mock',
+      http2: 'empty',
+      process: 'mock',
+      dgram: 'empty',
+      fs: 'empty',
+      net: 'empty',
+      tls: 'empty',
+      child_process: 'empty',
+      ...options.node,
+    });
+  }
+ 
 
   if (defineConfig.ignoreMomentLocale) {
     chainConfig.plugin('ignore-moment-locale').use(webpack.IgnorePlugin, [
@@ -655,6 +687,8 @@ module.exports = options => {
     });
   }
 
+ 
+
   // if (defineConfig.chunks) {
   //   chainConfig
   //     .plugin('htmlPlugins')
@@ -686,33 +720,29 @@ module.exports = options => {
     entry.push(require.resolve('./runtimePublicPathEntry'));
   }
 
-  // const nodeLibs = require('node-libs-browser');
+
+  const nodeLibs = require('node-libs-browser');
   // const ProvidePlugin = webpack.ProvidePlugin;
-  // if(isWebpack5) {
-  //   // ret.plugins.push({
-  //   //   new ProvidePlugin({
-  //   //     process: nodeLibs['process']
-  //   //   })
-  //   // });
-  //   // ret.plugins.push({
-  //   //   new ProvidePlugin({
-  //   //     Buffer: ['buffer', 'Buffer'],
-  //   //   })
-  //   // });
-  //   ret.resolve.fallback = {
-  //     ...ret.resolve.fallback,
-  //     ...Object.keys(nodeLibs).reduce((memo, key) => {
-  //       if(nodeLibs[key]) {
-  //         memo[key] = nodeLibs[key]
-  //       } else {
-  //         memo[key] = false
-  //       };
-  //       return memo
-  //     }, {}),
-  //     http: false,
-  //     https: false,
-  //   }
-  // }
+  if(isWebpack5) {
+    ret.plugins.push(
+      new webpack.ProvidePlugin({
+        process: nodeLibs['process']
+      })
+    );
+    ret.resolve.fallback = {
+      ...ret.resolve.fallback,
+      ...Object.keys(nodeLibs).reduce((memo, key) => {
+        if(nodeLibs[key]) {
+          memo[key] = nodeLibs[key]
+        } else {
+          memo[key] = false
+        };
+        return memo
+      }, {}),
+      http: false,
+      https: false,
+    }
+  }
 
   ret = {
     ...ret,

internals/webpack/webpack.dev.babel.js

@@ -13,8 +13,9 @@ module.exports = require('./webpack.base.babel')({
     path.join(process.cwd(), 'src/app.js'), // Start with js/app.js
   ],
   optimization: {
-    namedModules: true,
-    namedChunks: true,
+    // namedModules: true,
+    // namedChunks: true,
+    chunkIds: "named",
     runtimeChunk: {
       name: 'runtime',
     },
@@ -53,13 +54,13 @@ module.exports = require('./webpack.base.babel')({
     },
   },
   plugins: [
-    new CircularDependencyPlugin({
-      exclude: /node_modules/,
-      include: /src/,
-      failOnError: false,
-      allowAsyncCycles: false,
-      cwd: process.cwd(),
-    }),
+    // new CircularDependencyPlugin({
+    //   exclude: /node_modules/,
+    //   include: /src/,
+    //   failOnError: false,
+    //   allowAsyncCycles: false,
+    //   cwd: process.cwd(),
+    // }),
   ],
   devtool: 'cheap-module-source-map',
   node: {

internals/webpack/webpack.prod.babel.js

 // Important modules this config uses
 const path = require('path');
-const { HashedModuleIdsPlugin } = require('webpack');
+const webpack = require('webpack');
 const TerserPlugin = require('terser-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
 module.exports = require('./webpack.base.babel')({
@@ -27,6 +27,9 @@ module.exports = require('./webpack.base.babel')({
           compress: {
             comparisons: false,
           },
+          drop_debugger: true, 
+          drop_console: true,
+          pure_funcs: ['console.log'],
           parse: {},
           mangle: true,
           output: {
@@ -40,7 +43,8 @@ module.exports = require('./webpack.base.babel')({
       }),
     ],
     nodeEnv: 'production',
-    namedModules: true,
+    chunkIds: "deterministic",
+    moduleIds: "deterministic",
     usedExports: true,
     sideEffects: true,
     concatenateModules: true,
@@ -88,7 +92,7 @@ module.exports = require('./webpack.base.babel')({
       minRatio: 0.8,
     }),
 
-    new HashedModuleIdsPlugin({
+    new webpack.ids.HashedModuleIdsPlugin({
       hashFunction: 'sha256',
       hashDigest: 'hex',
       hashDigestLength: 20,

package.json

@@ -172,9 +172,6 @@
         "@umijs/fabric": "^2.2.0",
         "@umijs/runtime": "3.3.7",
         "@umijs/utils": "3.3.7",
-        "add-asset-html-webpack-plugin": "3.1.3",
-        "antd-icon-reduce-loader": "^1.0.6",
-        "antd-icon-reduce-plugin": "^1.1.1",
         "babel-core": "7.0.0-bridge.0",
         "babel-eslint": "10.0.1",
         "babel-loader": "8.0.5",
@@ -217,10 +214,9 @@
         "express": "^4.17.1",
         "file-loader": "3.0.1",
         "friendly-errors-webpack-plugin": "^1.7.0",
-        "fs": "0.0.1-security",
         "fs-extra": "^9.0.1",
         "html-loader": "0.5.5",
-        "html-webpack-plugin": "4.4.0",
+        "html-webpack-plugin": "5.5.0",
         "http-proxy-middleware": "^1.0.5",
         "husky": "^2.3.0",
         "imports-loader": "0.8.0",
@@ -287,10 +283,10 @@
         "traverse": "^0.6.6",
         "umi-webpack-bundle-analyzer": "3.6.0",
         "url-loader": "1.1.2",
-        "webpack": "4.44.1",
+        "webpack": "^5.65.0",
         "webpack-chain": "6.5.1",
-        "webpack-cli": "3.3.0",
-        "webpack-dev-middleware": "3.6.2",
+        "webpack-cli": "4.2.0",
+        "webpack-dev-middleware": "5.3.0",
         "webpack-hot-middleware": "2.24.3",
         "webpack-manifest-plugin": "^3.0.0",
         "webpack-theme-color-replacer": "^1.3.15",

server/middlewares/addDevMiddlewares.js

@@ -10,30 +10,36 @@ function getIgnoredWatchRegExp() {
 }
 function createWebpackMiddleware(compiler, output, config) {
   return webpackDevMiddleware(compiler, {
-    logLevel: 'warn',
+    // logLevel: 'warn',
     publicPath: output.publicPath,
-    silent: true,
+    // silent: true,
     stats: 'errors-only',
     writeToDisk: config && config.devServer && config.devServer.writeToDisk,
-    watchOptions: {
-      ignored: getIgnoredWatchRegExp()
-    }
+    // watchOptions: {
+    //   ignored: getIgnoredWatchRegExp()
+    // }
   });
 }
 
 module.exports = function addDevMiddlewares(app, webpackConfig, config, { port= 8080, hostname = '127.0.0.1'  }) {
-  webpackConfig.plugins.push(
-    new DevCompileDonePlugin({
-      port: (webpackConfig.devServer && webpackConfig.devServer.port) ? (webpackConfig.devServer.port || port): port,
-      hostname: (webpackConfig.devServer && webpackConfig.devServer.hostname ) ? (webpackConfig.devServer.hostname || '127.0.0.1'): hostname,
-      onCompileDone({ isFirstCompile, stats }) {
-        emitter.emit('onDevCompileDone', { isFirstCompile, stats });
-      },
-      onCompileFail(error) {
-        console.log(error);
-      },
-    }),
-  )
+  if(!config.mfsu) {
+    webpackConfig.plugins.push(
+      new DevCompileDonePlugin({
+        port: (webpackConfig.devServer && webpackConfig.devServer.port) ? (webpackConfig.devServer.port || port): port,
+        hostname: (webpackConfig.devServer && webpackConfig.devServer.hostname ) ? (webpackConfig.devServer.hostname || '127.0.0.1'): hostname,
+        onCompileDone({ isFirstCompile, stats }) {
+          if(isFirstCompile) {
+            emitter.emit('onDevCompileDone', { isFirstCompile, stats });
+          }
+         
+        },
+        onCompileFail(error) {
+          console.log(error);
+        },
+      }),
+    )
+  }
+  
   const compiler = webpack(webpackConfig);
   const middleware = createWebpackMiddleware(
     compiler,
@@ -44,8 +50,7 @@ module.exports = function addDevMiddlewares(app, webpackConfig, config, { port=
 
   app.use(middleware);
   app.use(webpackHotMiddleware(compiler));
-
-  const fs = middleware.fileSystem;
+  const fs = middleware.context.outputFileSystem;
 
   app.get('*', (req, res) => {
     fs.readFile(path.join(compiler.outputPath, 'index.html'), (err, file) => {

server/server.js

 const {
   lodash,
   portfinder,
+  createDebug,
 } = require('@umijs/utils');
 const express = require('express');
 const { createProxyMiddleware } = require('http-proxy-middleware');
@@ -10,6 +11,7 @@ const url =  require('url');
 const http = require('http');
 // const https = require('https');
 const sockjs = require('sockjs');
+const debug = createDebug('umi:server:Server');
 const defaultOpts = {
   afterMiddlewares: [],
   beforeMiddlewares: [],
@@ -135,7 +137,7 @@ class Server {
     );
   }
 
-  setupProxy(proxyOpts, isWatch = false) {
+  setupProxy(proxyOpts, isWatch = true) {
     let proxy = proxyOpts || this.opts.proxy;
     if (!Array.isArray(proxy)) {
       if (proxy && 'target' in proxy) {

src/app.js

@@ -2,7 +2,6 @@ import 'whatwg-fetch';
 import './public-path'
 import '!file-loader?name=[name].[ext]!./images/favicon.ico';
 import './global.less';
-// import '@babel/polyfill';
 import 'animate.css/animate.css';
 import 'antd/dist/antd.less';
 import 'file-loader?name=.htaccess!./.htaccess'; // eslint-disable-line import/extensions

src/components/openapi/openapi.js

@@ -3,10 +3,10 @@ import 'swagger-ui-react/swagger-ui.css';
 import React from 'react';
 
 import { Card } from 'antd';
-import SwaggerUI from 'swagger-ui-react';
+// import SwaggerUI from 'swagger-ui-react';
 
 export default () => (
   <Card>
-    <SwaggerUI url={`${window.location.origin}/civ-plugins_openapi.json`} />
+    {/* <SwaggerUI url={`${window.location.origin}/civ-plugins_openapi.json`} /> */}
   </Card>
 );

src/initConfig.js

@@ -9,6 +9,7 @@ import Login from './pages/user/login/login';
 const namespace = `__PANDA_STORE__${location.hostname}`;
 window.createStoreage = new Storeage(namespace);
 export const initGlobalConfig = () => {
+  
     // eslint-disable-next-line no-debugger
     // eslint-disable-next-line no-undef
     createStoreage.remove(`__PANDA_STORE__${location.hostname}`);

src/layouts/SecurityLayout.js

@@ -39,6 +39,7 @@ class SecurityLayout extends React.Component {
       );
     }
 
+
     if ((!isLogin && loading) || !isReady) {
       return <PageLoading />;
     }

src/micro.js

@@ -487,7 +487,7 @@ window.app.define('@ant-design/pro-utils', require.context('../node_modules/@ant
 window.app.define('@ant-design/pro-layout', require.context('../node_modules/@ant-design/pro-layout/lib', true, /^.\/(lib\/)?[^\/]+\.js$/), 'index.js');
 window.app.define('@ant-design/pro-table', require.context('../node_modules/@ant-design/pro-table/lib', true, /^.\/(lib\/)?[^\/]+\.js$/), 'index.js');
 window.app.define('@ant-design/pro-provider', require.context('../node_modules/@ant-design/pro-provider/lib', true, /^.\/(lib\/)?[^\/]+\.js$/), 'index.js');
-window.app.define('pinyin-match', require.context('../node_modules/pinyin-match/lib', true, /^.\/(lib\/)?[^\/]+\.js$/), 'main.js');
+// window.app.define('pinyin-match', require.context('../node_modules/pinyin-match/lib', true, /^.\/(lib\/)?[^\/]+\.js$/), 'main.js');
 window.app.define('react-intl', require.context('../node_modules/react-intl/lib', true, /^.\/(lib\/)?[^\/]+\.js$/), 'index.js');
 window.app.define('moment', require.context('moment', true, /^.\/moment\.js$/), 'moment.js');
 window.app.define('rc-align', require.context('../node_modules/rc-align/lib', true, /^.\/(lib\/)?[^\/]+\.js$/), 'index.js');