chore: webpack 5 (#3894)

antd-tools/getWebpackConfig.js

@@ -3,7 +3,7 @@ injectRequire();
 const path = require('path');
 const webpack = require('webpack');
 const WebpackBar = require('webpackbar');
-const webpackMerge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const TerserPlugin = require('terser-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
@@ -39,6 +39,7 @@ function getWebpackConfig(modules) {
     babelConfig.plugins.push(require.resolve('./replaceLib'));
   }
 
+  /** @type {import('webpack').Configuration} */
   const config = {
     devtool: 'source-map',
 
@@ -65,21 +66,20 @@ function getWebpackConfig(modules) {
       alias: {
         '@': process.cwd(),
       },
+      fallback: [
+        'child_process',
+        'cluster',
+        'dgram',
+        'dns',
+        'fs',
+        'module',
+        'net',
+        'readline',
+        'repl',
+        'tls',
+      ].reduce((acc, name) => Object.assign({}, acc, { [name]: false }), {}),
     },
 
-    node: [
-      'child_process',
-      'cluster',
-      'dgram',
-      'dns',
-      'fs',
-      'module',
-      'net',
-      'readline',
-      'repl',
-      'tls',
-    ].reduce((acc, name) => Object.assign({}, acc, { [name]: 'empty' }), {}),
-
     module: {
       noParse: [/moment.js/],
       rules: [
@@ -219,7 +219,7 @@ All rights reserved.
     };
 
     // Development
-    const uncompressedConfig = webpackMerge({}, config, {
+    const uncompressedConfig = merge({}, config, {
       entry: {
         [distFileBaseName]: entry,
       },
@@ -232,7 +232,7 @@ All rights reserved.
     });
 
     // Production
-    const prodConfig = webpackMerge({}, config, {
+    const prodConfig = merge({}, config, {
       entry: {
         [`${distFileBaseName}.min`]: entry,
       },

components/breadcrumb/BreadcrumbItem.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, HTMLAttributes, inject } from 'vue';
+import { defineComponent, inject } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { hasProp, getComponent, getSlot } from '../_util/props-util';
 import { defaultConfigProvider } from '../config-provider';
@@ -24,7 +24,7 @@ export default defineComponent({
      * if overlay is have
      * Wrap a DropDown
      */
-    renderBreadcrumbNode(breadcrumbItem: HTMLAttributes, prefixCls: string) {
+    renderBreadcrumbNode(breadcrumbItem: JSX.Element, prefixCls: string) {
       const overlay = getComponent(this, 'overlay');
       if (overlay) {
         return (
@@ -45,7 +45,7 @@ export default defineComponent({
     const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
     const separator = getComponent(this, 'separator');
     const children = getSlot(this);
-    let link: HTMLAttributes;
+    let link: JSX.Element;
     if (hasProp(this, 'href')) {
       link = <a class={`${prefixCls}-link`}>{children}</a>;
     } else {

components/modal/Modal.tsx

@@ -13,7 +13,7 @@ import addEventListener from '../vc-util/Dom/addEventListener';
 import { getConfirmLocale } from './locale';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
 import Button from '../button';
-import buttonTypes, { ButtonType, ButtonProps } from '../button/buttonTypes';
+import buttonTypes, { ButtonType, ButtonProps as ButtonPropsType } from '../button/buttonTypes';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import { getComponent, getSlot } from '../_util/props-util';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
@@ -79,8 +79,8 @@ const modalProps = {
   maskClosable: PropTypes.looseBool,
   /** 强制渲染 Modal*/
   forceRender: PropTypes.looseBool,
-  okButtonProps: PropTypes.shape(ButtonProps),
+  okButtonProps: PropTypes.shape(buttonTypes),
-  cancelButtonProps: PropTypes.shape(ButtonProps),
+  cancelButtonProps: PropTypes.shape(buttonTypes),
   destroyOnClose: PropTypes.looseBool,
   wrapClassName: PropTypes.string,
   maskTransitionName: PropTypes.string,
@@ -107,8 +107,8 @@ export interface ModalFuncProps {
   // TODO: find out exact types
   onOk?: (...args: any[]) => any;
   onCancel?: (...args: any[]) => any;
-  okButtonProps?: ButtonProps;
+  okButtonProps?: ButtonPropsType;
-  cancelButtonProps?: ButtonProps;
+  cancelButtonProps?: ButtonPropsType;
   centered?: boolean;
   width?: string | number;
   okText?: VNodeTypes;
@@ -194,6 +194,7 @@ export default defineComponent({
         loading: confirmLoading,
         ...(this.okButtonProps || {}),
       };
+
       return (
         <div>
           <Button {...cancelBtnProps}>

components/transfer/list.tsx

@@ -7,7 +7,7 @@ import Checkbox from '../checkbox';
 import Search from './search';
 import defaultRenderList from './renderListBody';
 import triggerEvent from '../_util/triggerEvent';
-import { defineComponent, HTMLAttributes, nextTick, VNode } from 'vue';
+import { defineComponent, nextTick, VNode, VNodeTypes } from 'vue';
 import { RadioChangeEvent } from '../radio/interface';
 
 const defaultRender = () => null;
@@ -173,7 +173,7 @@ export default defineComponent({
 
       let listBody = bodyDom;
       if (!listBody) {
-        let bodyNode: HTMLAttributes;
+        let bodyNode: VNodeTypes;
         const { onEvents } = splitAttrs(this.$attrs);
         const { bodyContent, customize } = renderListNode(renderList, {
           ...this.$props,

components/vc-select/SelectTrigger.tsx

@@ -64,6 +64,7 @@ export interface SelectTriggerProps {
   empty: boolean;
   getTriggerDOMNode: () => any;
 }
+
 const SelectTrigger = defineComponent<SelectTriggerProps, { popupRef: any }>({
   name: 'SelectTrigger',
   inheritAttrs: false,
@@ -136,6 +137,7 @@ const SelectTrigger = defineComponent<SelectTriggerProps, { popupRef: any }>({
     );
   },
 });
+
 SelectTrigger.props = {
   dropdownAlign: PropTypes.object,
   visible: PropTypes.looseBool,
@@ -155,4 +157,5 @@ SelectTrigger.props = {
   direction: PropTypes.string,
   getTriggerDOMNode: PropTypes.func,
 };
+
 export default SelectTrigger;

components/vc-select/Selector/index.tsx

@@ -17,6 +17,7 @@ import useLock from '../hooks/useLock';
 import { defineComponent, VNodeChild } from 'vue';
 import createRef, { RefObject } from '../../_util/createRef';
 import PropTypes from '../../_util/vue-types';
+import { VueNode } from 'ant-design-vue/es/_util/type';
 
 export interface InnerSelectorProps {
   prefixCls: string;
@@ -52,7 +53,7 @@ export interface SelectorProps {
   mode: Mode;
   searchValue: string;
   activeValue: string;
-  inputElement: JSX.Element;
+  inputElement: VueNode;
 
   autofocus?: boolean;
   accessibilityIndex: number;

components/vc-select/generate.tsx

@@ -1293,11 +1293,11 @@ export default function generateSelector<
             dropdownClassName={dropdownClassName}
             direction={direction}
             dropdownMatchSelectWidth={dropdownMatchSelectWidth}
-            dropdownRender={dropdownRender}
+            dropdownRender={dropdownRender as any}
             dropdownAlign={dropdownAlign}
             getPopupContainer={getPopupContainer}
             empty={!mergedOptions.length}
-            getTriggerDOMNode={() => selectorDomRef.current as any}
+            getTriggerDOMNode={() => selectorDomRef.current}
           >
             <Selector
               {...this.$props}

package.json

@@ -28,8 +28,7 @@
     "vetur"
   ],
   "scripts": {
-    "dev": "webpack-dev-server",
+    "dev": "webpack serve",
-    "start": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js",
     "test": "cross-env NODE_ENV=test WORKFLOW=true jest --config .jest.js",
     "test:dev": "cross-env NODE_ENV=test jest --config .jest.js",
     "compile": "node antd-tools/cli/run.js compile",
@@ -95,10 +94,10 @@
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
     "@vue/test-utils": "^2.0.0-0",
+    "@webpack-cli/serve": "^1.3.1",
     "acorn": "^7.0.0",
     "autoprefixer": "^9.6.0",
     "axios": "^0.21.0",
-    "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^26.1.0",
     "babel-loader": "^8.0.0",
@@ -130,7 +129,7 @@
     "gulp-babel": "^8.0.0",
     "gulp-strip-code": "^0.1.4",
     "gulp-typescript": "^6.0.0-alpha.1",
-    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "^5.3.1",
     "husky": "^4.0.0",
     "ignore-emit-webpack-plugin": "^2.0.6",
     "istanbul-instrumenter-loader": "^3.0.0",
@@ -176,8 +175,8 @@
     "terser-webpack-plugin": "^3.0.3",
     "through2": "^3.0.0",
     "ts-jest": "^26.4.1",
-    "ts-loader": "^8.0.2",
+    "ts-loader": "^8.1.0",
-    "typescript": "^4.0.2",
+    "typescript": "^4.2.0",
     "umi-mock-middleware": "^1.0.0",
     "umi-request": "^1.3.5",
     "url-loader": "^3.0.0",
@@ -195,12 +194,12 @@
     "vue-server-renderer": "^2.6.11",
     "vue-style-loader": "^4.1.2",
     "vuex": "^4.0.0-beta.2",
-    "webpack": "^4.28.4",
+    "webpack": "^5.0.0",
     "webpack-bundle-analyzer": "^4.0.0",
-    "webpack-cli": "^3.2.1",
+    "webpack-cli": "^4.6.0",
     "webpack-dev-server": "^3.1.14",
-    "webpack-merge": "^4.1.1",
+    "webpack-merge": "^5.0.0",
-    "webpackbar": "^4.0.0",
+    "webpackbar": "^5.0.0-3",
     "xhr-mock": "^2.5.1"
   },
   "dependencies": {

webpack.config.js

@@ -43,6 +43,8 @@ const babelConfig = {
   ],
 };
 
+/** @type {import('webpack').Configuration} */
+
 module.exports = {
   mode: 'development',
   entry: {
@@ -141,7 +143,7 @@ module.exports = {
     hot: true,
     open: true,
   },
-  devtool: 'cheap-module-eval-source-map',
+  devtool: 'inline-cheap-module-source-map',
   plugins: [
     new MiniCssExtractPlugin({
       filename: '[name].css',