@umijs/bundler-webpack 4.0.0-canary.20220323.1 → 4.0.0-canary.20220412.2

package/dist/client/client.js

@@ -41,14 +41,21 @@ const ErrorOverlay = __importStar(require("react-error-overlay"));
 const constants_1 = require("../constants");
 const formatWebpackMessages_1 = require("../utils/formatWebpackMessages");
 console.log('[webpack] connecting...');
+function getSocketHost() {
+    let l = location;
+    if (process.env.SOCKET_SERVER) {
+        l = new URL(process.env.SOCKET_SERVER);
+    }
+    const host = l.host;
+    const isHttps = l.protocol === 'https:';
+    return `${isHttps ? 'wss' : 'ws'}://${host}`;
+}
 let pingTimer = null;
-const host = location.host;
-const wsUrl = `ws://${host}`;
 let isFirstCompilation = true;
 let mostRecentCompilationHash = null;
 let hasCompileErrors = false;
 let hadRuntimeError = false;
-const socket = new WebSocket(wsUrl, 'webpack-hmr');
+const socket = new WebSocket(getSocketHost(), 'webpack-hmr');
 socket.addEventListener('message', ({ data }) => __awaiter(void 0, void 0, void 0, function* () {
     data = JSON.parse(data);
     if (data.type === 'connected') {

package/dist/config/compressPlugin.js

@@ -19,6 +19,7 @@ const terser_webpack_plugin_1 = __importDefault(require("../../compiled/terser-w
 const ESBuildCSSMinifyPlugin_1 = __importDefault(require("../plugins/ESBuildCSSMinifyPlugin"));
 const ParcelCSSMinifyPlugin_1 = require("../plugins/ParcelCSSMinifyPlugin");
 const types_1 = require("../types");
+const getEsBuildTarget_1 = require("../utils/getEsBuildTarget");
 function addCompressPlugin(opts) {
     return __awaiter(this, void 0, void 0, function* () {
         const { config, userConfig, env } = opts;
@@ -32,8 +33,14 @@ function addCompressPlugin(opts) {
         }
         config.optimization.minimize(true);
         let minify;
+        let terserOptions;
         if (jsMinifier === types_1.JSMinifier.esbuild) {
             minify = terser_webpack_plugin_1.default.esbuildMinify;
+            terserOptions = {
+                target: (0, getEsBuildTarget_1.getEsBuildTarget)({
+                    targets: userConfig.targets || {},
+                }),
+            };
         }
         else if (jsMinifier === types_1.JSMinifier.terser) {
             minify = terser_webpack_plugin_1.default.terserMinify;
@@ -47,11 +54,12 @@ function addCompressPlugin(opts) {
         else if (jsMinifier !== types_1.JSMinifier.none) {
             throw new Error(`Unsupported jsMinifier ${userConfig.jsMinifier}.`);
         }
+        terserOptions = Object.assign(Object.assign({}, terserOptions), userConfig.jsMinifierOptions);
         if (jsMinifier !== types_1.JSMinifier.none) {
             config.optimization.minimizer(`js-${jsMinifier}`).use(terser_webpack_plugin_1.default, [
                 {
                     minify,
-                    terserOptions: userConfig.jsMinifierOptions,
+                    terserOptions,
                 },
             ]);
         }

package/dist/config/config.js

@@ -35,6 +35,7 @@ const javaScriptRules_1 = require("./javaScriptRules");
 const manifestPlugin_1 = require("./manifestPlugin");
 const miniCSSExtractPlugin_1 = require("./miniCSSExtractPlugin");
 const nodePolyfill_1 = require("./nodePolyfill");
+const nodePrefixPlugin_1 = require("./nodePrefixPlugin");
 const progressPlugin_1 = require("./progressPlugin");
 const speedMeasureWebpackPlugin_1 = require("./speedMeasureWebpackPlugin");
 const svgRules_1 = require("./svgRules");
@@ -153,6 +154,8 @@ function getConfig(opts) {
         // await applyPurgeCSSWebpackPlugin(applyOpts);
         // handle HarmonyLinkingError
         yield (0, harmonyLinkingErrorPlugin_1.addHarmonyLinkingErrorPlugin)(applyOpts);
+        // remove node: prefix
+        yield (0, nodePrefixPlugin_1.addNodePrefixPlugin)(applyOpts);
         // runtimePublicPath
         if (userConfig.runtimePublicPath) {
             config.plugin('runtimePublicPath').use(RuntimePublicPathPlugin_1.RuntimePublicPathPlugin);

package/dist/config/nodePolyfill.js

@@ -14,12 +14,12 @@ const webpack_1 = require("@umijs/bundler-webpack/compiled/webpack");
 function addNodePolyfill(opts) {
     return __awaiter(this, void 0, void 0, function* () {
         const { config } = opts;
-        const nodeLibs = require('node-libs-browser');
         config.plugin('node-polyfill-provider').use(webpack_1.ProvidePlugin, [
             {
                 Buffer: ['buffer', 'Buffer'],
             },
         ]);
+        const nodeLibs = require('node-libs-browser');
         config.resolve.fallback.merge(Object.assign(Object.assign({}, Object.keys(nodeLibs).reduce((memo, key) => {
             if (nodeLibs[key]) {
                 memo[key] = nodeLibs[key];

package/dist/config/nodePrefixPlugin.d.ts

@@ -0,0 +1,11 @@
+import Config from '@umijs/bundler-webpack/compiled/webpack-5-chain';
+import { Env, IConfig } from '../types';
+interface IOpts {
+    name?: string;
+    config: Config;
+    userConfig: IConfig;
+    cwd: string;
+    env: Env;
+}
+export declare function addNodePrefixPlugin(opts: IOpts): Promise<void>;
+export {};

package/dist/config/nodePrefixPlugin.js

@@ -0,0 +1,25 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addNodePrefixPlugin = void 0;
+const webpack_1 = require("@umijs/bundler-webpack/compiled/webpack");
+function addNodePrefixPlugin(opts) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const { config } = opts;
+        config.plugin('node-prefix-plugin').use(webpack_1.NormalModuleReplacementPlugin, [
+            /^node:/,
+            (resource) => {
+                resource.request = resource.request.replace(/^node:/, '');
+            },
+        ]);
+    });
+}
+exports.addNodePrefixPlugin = addNodePrefixPlugin;

package/dist/constants.d.ts

@@ -12,3 +12,4 @@ export declare enum MESSAGE_TYPE {
 export declare const DEFAULT_BROWSER_TARGETS: {
     chrome: number;
 };
+export declare const DEFAULT_ESBUILD_TARGET_KEYS: string[];

package/dist/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_BROWSER_TARGETS = exports.MESSAGE_TYPE = exports.MFSU_NAME = exports.DEFAULT_OUTPUT_PATH = exports.DEFAULT_DEVTOOL = void 0;
+exports.DEFAULT_ESBUILD_TARGET_KEYS = exports.DEFAULT_BROWSER_TARGETS = exports.MESSAGE_TYPE = exports.MFSU_NAME = exports.DEFAULT_OUTPUT_PATH = exports.DEFAULT_DEVTOOL = void 0;
 exports.DEFAULT_DEVTOOL = 'cheap-module-source-map';
 exports.DEFAULT_OUTPUT_PATH = 'dist';
 exports.MFSU_NAME = 'MFSU';
@@ -16,3 +16,9 @@ var MESSAGE_TYPE;
 exports.DEFAULT_BROWSER_TARGETS = {
     chrome: 80,
 };
+exports.DEFAULT_ESBUILD_TARGET_KEYS = [
+    'chrome',
+    'firefox',
+    'edge',
+    'safari',
+];

package/dist/dev.d.ts

@@ -4,6 +4,8 @@ declare type IOpts = {
     afterMiddlewares?: any[];
     beforeMiddlewares?: any[];
     onDevCompileDone?: Function;
+    onProgress?: Function;
+    onMFSUProgress?: Function;
     port?: number;
     host?: string;
     babelPreset?: any;

package/dist/dev.js

@@ -41,11 +41,17 @@ function dev(opts) {
                 runtimePublicPath: opts.config.runtimePublicPath,
                 tmpBase: ((_d = opts.config.mfsu) === null || _d === void 0 ? void 0 : _d.cacheDirectory) ||
                     (0, path_1.join)(opts.cwd, 'node_modules/.cache/mfsu'),
+                onMFSUProgress: opts.onMFSUProgress,
                 getCacheDependency() {
                     var _a;
                     return {
                         version: require('../package.json').version,
                         esbuildMode: !!((_a = opts.config.mfsu) === null || _a === void 0 ? void 0 : _a.esbuild),
+                        alias: opts.config.alias,
+                        externals: opts.config.externals,
+                        theme: opts.config.theme,
+                        runtimePublicPath: !!opts.config.runtimePublicPath,
+                        publicPath: opts.config.publicPath,
                     };
                 },
             });
@@ -108,6 +114,7 @@ function dev(opts) {
             host: opts.host,
             afterMiddlewares: [...(opts.afterMiddlewares || [])],
             onDevCompileDone: opts.onDevCompileDone,
+            onProgress: opts.onProgress,
         });
     });
 }

package/dist/schema.js

@@ -46,6 +46,7 @@ function getSchemas() {
         fastRefresh: (Joi) => Joi.boolean(),
         forkTSChecker: (Joi) => Joi.object(),
         hash: (Joi) => Joi.boolean(),
+        https: (Joi) => Joi.object(),
         ignoreMomentLocale: (Joi) => Joi.boolean(),
         inlineLimit: (Joi) => Joi.number(),
         jsMinifier: (Joi) => Joi.string().valid(types_1.JSMinifier.esbuild, types_1.JSMinifier.swc, types_1.JSMinifier.terser, types_1.JSMinifier.uglifyJs, types_1.JSMinifier.none),

package/dist/server/https.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="node" />
+import { RequestListener } from 'http';
+import https from 'https';
+import { HttpsParams } from '../types';
+export declare function createHttpsServer(app: RequestListener, httpsConfig: HttpsParams): Promise<https.Server>;

package/dist/server/https.js

@@ -0,0 +1,73 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createHttpsServer = void 0;
+const utils_1 = require("@umijs/utils");
+const fs_1 = require("fs");
+const https_1 = __importDefault(require("https"));
+const path_1 = require("path");
+const defaultHttpsHosts = ['localhost', '127.0.0.1'];
+function createHttpsServer(app, httpsConfig) {
+    return __awaiter(this, void 0, void 0, function* () {
+        utils_1.logger.wait('[HTTPS] Starting service in https mode...');
+        // Check if mkcert is installed
+        try {
+            yield utils_1.execa.execa('mkcert', ['--version']);
+        }
+        catch (e) {
+            utils_1.logger.error('[HTTPS] The mkcert has not been installed.');
+            utils_1.logger.info('[HTTPS] Please follow the guide to install manually.');
+            switch (process.platform) {
+                case 'darwin':
+                    console.log(utils_1.chalk.green('$ brew install mkcert'));
+                    console.log(utils_1.chalk.gray('# If you use firefox, please install nss.'));
+                    console.log(utils_1.chalk.green('$ brew install nss'));
+                    console.log(utils_1.chalk.green('$ mkcert -install'));
+                    break;
+                case 'win32':
+                    console.log(utils_1.chalk.green('Checkout https://github.com/FiloSottile/mkcert#windows'));
+                    break;
+                case 'linux':
+                    console.log(utils_1.chalk.green('Checkout https://github.com/FiloSottile/mkcert#linux'));
+                    break;
+                default:
+                    break;
+            }
+            throw new Error(`[HTTPS] mkcert not found.`);
+        }
+        let { key, cert, hosts } = httpsConfig;
+        hosts = hosts || defaultHttpsHosts;
+        if (!key || !cert) {
+            key = (0, path_1.join)(__dirname, 'umi.key.pem');
+            cert = (0, path_1.join)(__dirname, 'umi.pem');
+        }
+        // Generate cert and key files if they are not exist.
+        if (!(0, fs_1.existsSync)(key) || !(0, fs_1.existsSync)(cert)) {
+            utils_1.logger.wait('[HTTPS] Generating cert and key files...');
+            yield utils_1.execa.execa('mkcert', [
+                '-cert-file',
+                cert,
+                '-key-file',
+                key,
+                ...hosts,
+            ]);
+        }
+        // Create server
+        return https_1.default.createServer({
+            key: (0, fs_1.readFileSync)(key, 'utf-8'),
+            cert: (0, fs_1.readFileSync)(cert, 'utf-8'),
+        }, app);
+    });
+}
+exports.createHttpsServer = createHttpsServer;

package/dist/server/server.d.ts

@@ -11,6 +11,7 @@ interface IOpts {
     beforeMiddlewares?: any[];
     afterMiddlewares?: any[];
     onDevCompileDone?: Function;
+    onProgress?: Function;
 }
-export declare function createServer(opts: IOpts): Promise<http.Server>;
+export declare function createServer(opts: IOpts): Promise<import("https").Server | http.Server | null>;
 export {};

package/dist/server/server.js

@@ -21,6 +21,7 @@ const fs_1 = require("fs");
 const http_1 = __importDefault(require("http"));
 const path_1 = require("path");
 const constants_1 = require("../constants");
+const https_1 = require("./https");
 const ws_1 = require("./ws");
 function createServer(opts) {
     return __awaiter(this, void 0, void 0, function* () {
@@ -42,7 +43,7 @@ function createServer(opts) {
         // cros
         app.use((_req, res, next) => {
             res.header('Access-Control-Allow-Origin', '*');
-            res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
+            res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With');
             res.header('Access-Control-Allow-Methods', 'GET, HEAD, PUT, POST, PATCH, DELETE, OPTIONS');
             next();
         });
@@ -55,17 +56,35 @@ function createServer(opts) {
         app.use((req, res, next) => {
             if (req.path === '/umi.js' && (0, fs_1.existsSync)((0, path_1.join)(opts.cwd, 'umi.js'))) {
                 res.setHeader('Content-Type', 'application/javascript');
-                res.send((0, fs_1.readFileSync)((0, path_1.join)(opts.cwd, 'umi.js'), 'utf-8'));
+                (0, fs_1.createReadStream)((0, path_1.join)(opts.cwd, 'umi.js')).on('error', next).pipe(res);
             }
             else {
                 next();
             }
         });
         // webpack dev middleware
-        const compiler = (0, webpack_1.default)(Array.isArray(webpackConfig) ? webpackConfig : [webpackConfig]);
+        const configs = Array.isArray(webpackConfig)
+            ? webpackConfig
+            : [webpackConfig];
+        const progresses = [];
+        if (opts.onProgress) {
+            configs.forEach((config) => {
+                const progress = {
+                    percent: 0,
+                    status: 'waiting',
+                };
+                progresses.push(progress);
+                config.plugins.push(new webpack_1.default.ProgressPlugin((percent, msg) => {
+                    progress.percent = percent;
+                    progress.status = msg;
+                    opts.onProgress({ progresses });
+                }));
+            });
+        }
+        const compiler = (0, webpack_1.default)(configs);
         const webpackDevMiddleware = require('@umijs/bundler-webpack/compiled/webpack-dev-middleware');
         const compilerMiddleware = webpackDevMiddleware(compiler, {
-            publicPath: '/',
+            publicPath: userConfig.publicPath || '/',
             writeToDisk: userConfig.writeToDisk,
             stats: 'none',
             // watchOptions: { ignored }
@@ -165,24 +184,29 @@ function createServer(opts) {
             res.set('Content-Type', 'text/html');
             const htmlPath = (0, path_1.join)(opts.cwd, 'index.html');
             if ((0, fs_1.existsSync)(htmlPath)) {
-                const html = (0, fs_1.readFileSync)(htmlPath, 'utf-8');
-                res.send(html);
+                (0, fs_1.createReadStream)(htmlPath).on('error', next).pipe(res);
             }
             else {
                 next();
             }
         });
-        const server = http_1.default.createServer(app);
+        const server = userConfig.https
+            ? yield (0, https_1.createHttpsServer)(app, userConfig.https)
+            : http_1.default.createServer(app);
+        if (!server) {
+            return null;
+        }
         const ws = (0, ws_1.createWebSocketServer)(server);
         ws.wss.on('connection', (socket) => {
             if (stats) {
                 sendStats(getStats(stats), false, socket);
             }
         });
+        const protocol = userConfig.https ? 'https:' : 'http:';
         const port = opts.port || 8000;
         server.listen(port, () => {
             const host = opts.host && opts.host !== '0.0.0.0' ? opts.host : '127.0.0.1';
-            utils_1.logger.ready(`App listening at ${utils_1.chalk.green(`http://${host}:${port}`)}`);
+            utils_1.logger.ready(`App listening at ${utils_1.chalk.green(`${protocol}//${host}:${port}`)}`);
         });
         return server;
     });

package/dist/server/ws.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="node" />
-import { Server } from 'http';
+import { Server as HttpServer } from 'http';
+import { Server as HttpsServer } from 'https';
 import WebSocket from '../../compiled/ws';
-export declare function createWebSocketServer(server: Server): {
+export declare function createWebSocketServer(server: HttpServer | HttpsServer): {
     send(message: string): void;
     wss: WebSocket.Server;
     close(): void;

package/dist/swcPlugins/autoCSSModules.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const Visitor_1 = __importDefault(require("@swc/core/Visitor"));
 const utils_1 = require("@umijs/utils");
+const changeImportFromString_1 = require("./changeImportFromString");
 class AutoCSSModule extends Visitor_1.default {
     visitTsType(expression) {
         return expression;
@@ -24,7 +25,8 @@ class AutoCSSModule extends Visitor_1.default {
         const { specifiers, source } = expression;
         const { value } = source;
         if (specifiers.length && (0, utils_1.isStyleFile)({ filename: value })) {
-            return Object.assign(Object.assign({}, expression), { source: Object.assign(Object.assign({}, source), { value: `${value}?modules` }) });
+            const newImportFrom = `${value}?modules`;
+            (0, changeImportFromString_1.changeImportFromString)(expression, newImportFrom);
         }
         return expression;
     }

package/dist/swcPlugins/changeImportFromString.d.ts

@@ -0,0 +1,2 @@
+import type { ImportDeclaration } from '@swc/core';
+export declare const changeImportFromString: (e: ImportDeclaration, v: string) => void;

package/dist/swcPlugins/changeImportFromString.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.changeImportFromString = void 0;
+const changeImportFromString = (e, v) => {
+    e.source.value = v;
+    // sync change to `raw`
+    // https://github.com/swc-project/swc/issues/4128
+    e.source.raw = `'${v}'`;
+};
+exports.changeImportFromString = changeImportFromString;

package/dist/swcPlugins/lockCoreJS.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const Visitor_1 = __importDefault(require("@swc/core/Visitor"));
 const utils_1 = require("@umijs/utils");
 const path_1 = require("path");
+const changeImportFromString_1 = require("./changeImportFromString");
 function addLastSlash(path) {
     return path.endsWith('/') ? path : `${path}/`;
 }
@@ -14,8 +15,8 @@ class LockCoreJS extends Visitor_1.default {
         const { source } = expression;
         let { value, type } = source;
         if (type === 'StringLiteral' && value.startsWith('core-js/')) {
-            value = value.replace(/^core-js\//, addLastSlash((0, utils_1.winPath)((0, path_1.dirname)(require.resolve('core-js/package.json')))));
-            return Object.assign(Object.assign({}, expression), { source: Object.assign(Object.assign({}, source), { value }) });
+            const newValue = value.replace(/^core-js\//, addLastSlash((0, utils_1.winPath)((0, path_1.dirname)(require.resolve('core-js/package.json')))));
+            (0, changeImportFromString_1.changeImportFromString)(expression, newValue);
         }
         return expression;
     }

package/dist/types.d.ts

@@ -41,6 +41,11 @@ export interface DeadCodeParams {
     detectUnusedExport?: boolean;
     context?: string;
 }
+export interface HttpsParams {
+    key?: string;
+    cert?: string;
+    hosts?: string[];
+}
 export interface IConfig {
     alias?: Record<string, string>;
     autoCSSModules?: boolean;
@@ -63,6 +68,7 @@ export interface IConfig {
     depTranspiler?: Transpiler;
     devtool?: Config.DevTool;
     deadCode?: DeadCodeParams;
+    https?: HttpsParams;
     externals?: WebpackConfig['externals'];
     esm?: {
         [key: string]: any;

package/dist/utils/getEsBuildTarget.d.ts

@@ -0,0 +1,5 @@
+interface IOpts {
+    targets: Record<string, any>;
+}
+export declare function getEsBuildTarget({ targets }: IOpts): string[];
+export {};

package/dist/utils/getEsBuildTarget.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEsBuildTarget = void 0;
+const constants_1 = require("../constants");
+function getEsBuildTarget({ targets }) {
+    return Object.keys(targets)
+        .filter((key) => constants_1.DEFAULT_ESBUILD_TARGET_KEYS.includes(key))
+        .map((key) => {
+        return `${key}${targets[key] === true ? '0' : targets[key]}`;
+    });
+}
+exports.getEsBuildTarget = getEsBuildTarget;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/bundler-webpack",
-  "version": "4.0.0-canary.20220323.1",
+  "version": "4.0.0-canary.20220412.2",
   "description": "@umijs/bundler-webpack",
   "homepage": "https://github.com/umijs/umi-next/tree/master/packages/bundler-webpack#readme",
   "bugs": "https://github.com/umijs/umi-next/issues",
@@ -29,15 +29,16 @@
     "test": "jest -c ../../jest.turbo.config.ts"
   },
   "dependencies": {
-    "@parcel/css": "1.7.2",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.5.4",
+    "@parcel/css": "1.8.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.5",
     "@svgr/core": "6.2.1",
     "@svgr/plugin-jsx": "^6.2.1",
     "@svgr/plugin-svgo": "^6.2.0",
     "@types/hapi__joi": "17.1.8",
-    "@umijs/babel-preset-umi": "4.0.0-canary.20220323.1",
-    "@umijs/mfsu": "4.0.0-canary.20220323.1",
-    "@umijs/utils": "4.0.0-canary.20220323.1",
+    "@umijs/babel-preset-umi": "4.0.0-canary.20220412.2",
+    "@umijs/bundler-utils": "4.0.0-canary.20220412.2",
+    "@umijs/mfsu": "4.0.0-canary.20220412.2",
+    "@umijs/utils": "4.0.0-canary.20220412.2",
     "css-loader": "6.7.1",
     "es5-imcompatible-versions": "^0.1.73",
     "jest-worker": "27.5.1",
@@ -47,7 +48,7 @@
     "react-error-overlay": "6.0.9"
   },
   "devDependencies": {
-    "@swc/core": "1.2.157",
+    "@swc/core": "1.2.165",
     "@types/webpack-sources": "3.2.0",
     "@types/ws": "8.5.3",
     "autoprefixer": "10.4.4",
@@ -56,15 +57,15 @@
     "connect-history-api-fallback": "1.6.0",
     "copy-webpack-plugin": "10.2.4",
     "css-minimizer-webpack-plugin": "3.4.1",
-    "cssnano": "5.1.5",
-    "fork-ts-checker-webpack-plugin": "7.2.1",
+    "cssnano": "5.1.7",
+    "fork-ts-checker-webpack-plugin": "7.2.4",
     "http-proxy-middleware": "2.0.4",
     "less-loader": "10.2.0",
     "mini-css-extract-plugin": "2.6.0",
     "postcss-flexbugs-fixes": "5.0.2",
     "postcss-loader": "6.2.1",
     "purgecss-webpack-plugin": "4.1.3",
-    "react-refresh": "0.11.0",
+    "react-refresh": "0.12.0",
     "sass-loader": "12.6.0",
     "schema-utils": "4.0.0",
     "speed-measure-webpack-plugin": "1.5.0",
@@ -74,7 +75,7 @@
     "terser": "5.12.1",
     "terser-webpack-plugin": "5.3.1",
     "url-loader": "4.1.1",
-    "webpack": "5.70.0",
+    "webpack": "5.72.0",
     "webpack-5-chain": "8.0.0",
     "webpack-bundle-analyzer": "4.5.0",
     "webpack-dev-middleware": "5.3.1",
@@ -174,6 +175,7 @@
       "postcss-flexbugs-fixes",
       "postcss-loader",
       "purgecss-webpack-plugin",
+      "react-refresh",
       "sass-loader",
       "speed-measure-webpack-plugin",
       "style-loader",