feat: Update Ant Design Countdown usage and configure webpack for production caching, module resolution, and path aliases.

Author: jacob-lcs

package.json

@@ -3,6 +3,13 @@
   "version": "1.1.0",
   "description": "webpack5 react 模板",
   "main": "index.js",
+  "sideEffects": [
+    "*.css",
+    "*.less",
+    "*.scss",
+    "*.sass",
+    "*.styl"
+  ],
   "scripts": {
     "dev": "webpack serve --config webpack.dev.js --hot",
     "build": "webpack --config webpack.prod.js"
@@ -27,6 +34,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.16.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.6.2",
     "@swc/core": "^1.9.2",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^25.0.3",
@@ -52,6 +60,7 @@
     "postcss-normalize": "^13.0.1",
     "postcss-preset-env": "^10.1.1",
     "react-compiler-webpack": "^1.0.0",
+    "react-refresh": "^0.18.0",
     "resolve-url-loader": "^5.0.0",
     "sass": "^1.81.0",
     "sass-loader": "^16.0.3",
@@ -74,4 +83,4 @@
   "engines": {
     "pnpm": "^10.0.0"
   }
-}
+}

pnpm-lock.yaml

@@ -1,33 +1,46 @@
-import React from 'react'
-import { Statistic, Row, Col } from 'antd'
-import { set } from 'lodash-es'
-import dayjs from 'dayjs'
-import './App.less';
-
-const { Countdown } = Statistic;
+import React from "react";
+import { Statistic, Row, Col } from "antd";
+import { set } from "lodash-es";
+import dayjs from "dayjs";
+import "./App.less";
 
 const App = () => {
   const deadline = dayjs().unix() * 1000 + 1000 * 60 * 60 * 24 * 2 + 1000 * 30;
   const onFinish = () => {
-    const a = {}
-    set(a, 'finish', true)
-  }
+    const a = {};
+    set(a, "finish", true);
+  };
 
   return (
     <div className="container">
       <Row gutter={16} className="time">
         <Col span={12}>
-          <Countdown title="Countdown" value={deadline} onFinish={onFinish} />
+          <Statistic.Timer
+            type="countdown"
+            title="Countdown"
+            value={deadline}
+            onFinish={onFinish}
+          />
         </Col>
         <Col span={12}>
-          <Countdown title="Million Seconds" value={deadline} format="HH:mm:ss:SSS"/>
+          <Statistic.Timer
+            type="countdown"
+            title="Million Seconds"
+            value={deadline}
+            format="HH:mm:ss:SSS"
+          />
         </Col>
         <Col span={24} style={{ marginTop: 32 }}>
-          <Countdown title="Day Level" value={deadline} format="D 天 H 时 m 分 s 秒" />
+          <Statistic.Timer
+            type="countdown"
+            title="Day Level"
+            value={deadline}
+            format="D 天 H 时 m 分 s 秒"
+          />
         </Col>
       </Row>
     </div>
-  )
-}
+  );
+};
 
-export default App
+export default App;

src/App.tsx

@@ -11,9 +11,9 @@
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 
     /* Language and Environment */
-    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
-    "jsx": "preserve",                                /* Specify what JSX code is generated. */
+    "jsx": "preserve" /* Specify what JSX code is generated. */,
     // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
     // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
     // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
@@ -25,11 +25,13 @@
     // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
 
     /* Modules */
-    "module": "commonjs",                                /* Specify what module code is generated. */
+    "module": "esnext" /* Specify what module code is generated. */,
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
-    // "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
-    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
-    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+    "moduleResolution": "bundler" /* Specify how TypeScript looks up a file from a given module specifier. */,
+    "baseUrl": "./" /* Specify the base directory to resolve non-relative module names. */,
+    "paths": {
+      "@/*": ["src/*"]
+    } /* Specify a set of entries that re-map imports to additional lookup locations. */,
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
     // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
     // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
@@ -77,12 +79,12 @@
     // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
     // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
     // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
-    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
     // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
-    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
 
     /* Type Checking */
-    "strict": true,                                      /* Enable all strict type-checking options. */
+    "strict": true /* Enable all strict type-checking options. */,
     // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
     // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
     // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
@@ -104,6 +106,6 @@
 
     /* Completeness */
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
-    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */
   }
 }

tsconfig.json

@@ -42,6 +42,9 @@ module.exports = () => {
     ],
     resolve: {
       extensions: [".tsx", ".jsx", ".ts", ".js", ".json", ".wasm"],
+      alias: {
+        "@": path.resolve(__dirname, "src"),
+      },
     },
     module: {
       rules: [

webpack.common.js

@@ -1,24 +1,26 @@
-const { merge } = require('webpack-merge');
-const common = require('./webpack.common.js');
+const { merge } = require("webpack-merge");
+const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
+const common = require("./webpack.common.js");
 
-module.exports = env => {
+module.exports = (env) => {
   return merge(common(env), {
-    mode: 'development',
+    mode: "development",
     cache: {
-      type: 'filesystem',
+      type: "filesystem",
       // 可选配置
       buildDependencies: {
-        config: [__filename],  // 当构建依赖的config文件（通过 require 依赖）内容发生变化时，缓存失效
+        config: [__filename], // 当构建依赖的config文件（通过 require 依赖）内容发生变化时，缓存失效
       },
-      name: 'development-cache',  // 配置以name为隔离，创建不同的缓存文件，如生成PC或mobile不同的配置缓存
+      name: "development-cache", // 配置以name为隔离，创建不同的缓存文件，如生成PC或mobile不同的配置缓存
     },
     devServer: {
       port: 8081,
-      host: '0.0.0.0',
-      allowedHosts: 'all'
+      host: "0.0.0.0",
+      allowedHosts: "all",
     },
+    plugins: [new ReactRefreshWebpackPlugin()],
     optimization: {
       moduleIds: "deterministic",
     },
   });
-}
+};