antd 按需加载

config/webpack.common.config.js

@@ -1,3 +1,4 @@
+const tsImportPluginFactory = require("ts-import-plugin"); // 按需加载
 const path = require("path");
 const resolve = dir => {
   return path.resolve(process.cwd(), dir);
@@ -18,6 +19,20 @@ module.exports = {
   module: {
     rules: [
       {
+        test: /\.(jsx|tsx|js|ts)$/,
+        loader: "ts-loader",
+        options: {
+          transpileOnly: true,
+          getCustomTransformers: () => ({
+            before: [tsImportPluginFactory(/** options */)]
+          }),
+          compilerOptions: {
+            module: "es2015"
+          }
+        },
+        exclude: /node_modules/
+      },
+      /*{
         test: /\.(j|t)sx?$/,
         include: [resolve("src")],
         exclude: /node_modules/,
@@ -50,7 +65,7 @@ module.exports = {
           ],
           sourceMap: true
         }
-      },
+      },*/
       {
         test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
         use: [

package.json

@@ -15,8 +15,11 @@
   "dependencies": {
     "@types/react": "^16.9.35",
     "@types/react-dom": "^16.9.8",
+    "antd": "^4.2.2",
+    "axios": "^0.19.2",
     "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react-dom": "^16.13.1",
+    "ts-import-plugin": "^1.6.6"
   },
   "devDependencies": {
     "@babel/core": "^7.9.6",
@@ -37,6 +40,8 @@
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "postcss-loader": "^3.0.0",
     "style-loader": "^1.2.1",
+    "ts-loader": "^7.0.4",
+    "typescript": "^3.8.3",
     "uglifyjs-webpack-plugin": "^2.2.0",
     "url-loader": "^4.1.0",
     "webpack": "^4.43.0",

src/app.less

@@ -1,3 +1,4 @@
+@import "~antd/dist/antd.css";
 .App {
   height: 300px;
   display: flex;

src/app.tsx

@@ -1,17 +1,19 @@
-import React from 'react';
-import './app.less';
-import background from './images/background.jpg';
+import React from "react";
+import { Button } from "antd";
+import "./app.less";
+import background from "./images/background.jpg";
 
 function App() {
-  console.log(background);
+	console.log(background);
 
-  return (
-    <div className="App">
-      <h1>I am changed</h1>
-      <div>{background}</div>
-      <img className="background" src={background} alt="" />
-    </div>
-  );
+	return (
+		<div className="App">
+			<Button type="primary">Button</Button>
+			<h1>I am changed</h1>
+			<div>{background}</div>
+			<img className="background" src={background} alt="" />
+		</div>
+	);
 }
 
 export default App;