下载
npm i antd@4.24.2
引入
//引入样式文件import "antd/dist/antd"
在main.js引入样式
//引入样式文件
import "antd/dist/antd.css"
// 使用React18import React from "react";import ReactDOM from "react-dom/client";import App from "./App";//引入样式文件import "antd/dist/antd.css"//使用前端路由需要引入import { BrowserRouter } from "react-router-dom";const root = ReactDOM.createRoot(document.getElementById("app"));root.render(<BrowserRouter><App /></BrowserRouter>);
给组件添加样式 button app.jsx
// import React from "react";// import Home from "./pages/Home"//Link导航链接 RoutesRoute加载显示路由链接import { Link, Routes, Route } from "react-router-dom";// import About from "./pages/About";//使用路由懒加载-webpackChunkName取名字import { Button } from "antd";import React, { Suspense, lazy } from "react";const Home = lazy(() => import(/* webpackChunkName: 'home' */ "./pages/Home"));const About = lazy(() => import(/* webpackChunkName: 'about' */ "./pages/About"));function App() {return (<div><h1>App</h1><Button type="primary">按钮</Button><ul><li><Link to="/home">Home</Link></li><li><Link to="/about">About</Link></li></ul><Suspense fallback={<div>loading...</div>}><Routes><Route path="/home" element={<Home />} /><Route path="/about" element={<About />} /></Routes></Suspense></div>);}export default App;
在 create-react-app 中使用 - Ant Design-更改主题颜色
preProcessor对less-loader进行判断-是否存在
并且引入less样式
减小打包体积
splitChunks进行单独打包
splitChunks: {chunks: "all",cacheGroups: {// layouts通常是admin项目的主体布局组件，所有路由组件都要使用的// 可以单独打包，从而复用// 如果项目中没有，请删除layouts: {name: "layouts",test: path.resolve(__dirname, "../src/layouts"),priority: 40,},// 如果项目中使用antd，此时将所有node_modules打包在一起，那么打包输出文件会比较大。// 所以我们将node_modules中比较大的模块单独打包，从而并行加载速度更好// 如果项目中没有，请删除antd: {name: "chunk-antd",test: /[\\/]node_modules[\\/]antd(.*)/,priority: 30,},// 将react相关的库单独打包，减少node_modules的chunk体积。react: { //减小代码体积-reac-dom react-router-dom一起打包成单独文件name: "react",test: /[\\/]node_modules[\\/]react(.*)?[\\/]/,chunks: "initial",//打包文件名priority: 20,//打包权重},libs: {//其他文件name: "chunk-libs",test: /[\\/]node_modules[\\/]/,priority: 10, // 权重最低，优先考虑前面内容chunks: "initial",},},},
关闭性能提示 performance:false-提升打包速度
//ESLint先引入const ESLintPlugin = require('eslint-webpack-plugin');// Node.js的核心模块，专门用来处理文件路径const path = require("path");//处理htmlconst HtmlWebpackPlugin = require("html-webpack-plugin");//提取样式成为单独文件const MiniCssExtractPlugin = require("mini-css-extract-plugin");//对样式压缩const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");//对js压缩const TerserPlugin = require("terser-webpack-plugin");//复制静态资源文件到index目录下面const CopyPlugin = require("copy-webpack-plugin");//获取process进程上的env环境变量上的NODE_ENVconst isProduction = process.env.NODE_ENV === "production";//js自动完成HMR功能const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');const getStyleLoaders = (preProcessor) => {return [isProduction ? MiniCssExtractPlugin.loader : "style-loader",//生产模式提取成单独文件"css-loader",// //该模块将css资源编译成commonjs的模块到js中{//考虑兼容性问题-配合packafe.json中的browserslist来指定兼容性loader: "postcss-loader",options: {postcssOptions: {plugins: ["postcss-preset-env", // 能解决大多数样式兼容性问题],},},},preProcessor && {loader: preProcessor,options:preProcessor === "less-loader"? {// antd的自定义主题lessOptions: {modifyVars: {// 其他主题色：https://ant.design/docs/react/customize-theme-cn"@primary-color": "#1DA57A", // 全局主色},javascriptEnabled: true,},}: {},},].filter(Boolean);}module.exports = {// 入口entry: "./src/main.js",// 相对路径和绝对路径都行 由于运行是在外面运行的所以不需要改变// 输出output: {// 必须绝对路径//生产模式有输出path: isProduction ? path.resolve(__dirname, "../dist") : undefined,//生产模式绝对路径需要更改// filename: 输出文件名-contenthash更好的做缓存filename: isProduction ? "static/js/[name].[contenthash:10].js" : "static/js/[name].js",//给打包输出的文件命名-动态导入chunkFilename: isProduction ? "static/js/[name].[contenthash:10].chunk.js" : "static/js/[name].chunk.js",// 图片、字体等资源命名方式（注意用hash）assetModuleFilename: "static/media/[name].[hash:10][ext][query]",clean: true,//自动将上次打包目录资源清空-无所谓哦},// 加载器-帮助识别不能识别的内容module: {//loader规则rules: [{//每个文件只能被其中一个loader配置处理oneOf: [{//css处理test: /\.css$/i, // 用来匹配 .css 结尾的文件use: getStyleLoaders(),},{test: /\.less$/i, // 用来匹配 .less 结尾的文件//loader:"xxx"只能使用1个loaderuse: getStyleLoaders("less-loader"),},{test: /\.s[ac]ss$/i,use: getStyleLoaders("sass-loader"),},{test: /\.styl$/,use: getStyleLoaders("stylus-loader"),},//处理图片{test: /\.(png|jpe?g|gif|webp|svg)/,type: 'asset',//asset会转base64parser: {//图片优化dataUrlCondition: {//小于10ke图片转base64//优点：减少请求数量 缺点：体积会更大maxSize: 10 * 1024 // 10kb}},},{//处理其他资源test: /\.(ttf|woff2|map4|map3|avi?)$/,//针对文件类型，正则type: "asset/resource",//不会转，原封不动输出},{test: /\.jsx?$/,//处理的文件js+jsxinclude: path.resolve(__dirname, "../src"), //只处理src文件use: [{loader: "babel-loader",//只用一个//提升性能options: {cacheDirectory: true, // 开启babel编译缓存cacheCompression: false, // 缓存文件不要压缩，压缩需要时间 plugins: [!isProduction && "react-refresh/babel",//js热更新].filter(Boolean), // 减少代码体积},},//这里不考虑多线程]},],}]},// 插件-扩展功能plugins: [//检查eslintnew ESLintPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, "../src"),exclude: "node_modules", // 默认值-排除不处理cache: true, // 开启缓存// 缓存目录cacheLocation: path.resolve(__dirname,"../node_modules/.cache/.eslintcache"),}),//处理html资源 自动引入new HtmlWebpackPlugin({// 以 public/index.html 为模板创建新的html文件// 新的html文件有两个特点：1. 内容和源文件一致 DOM结构 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, "../public/index.html"),}),!isProduction && new ReactRefreshWebpackPlugin(),//激活jsHmr功能// 提取css成单独文件-只在生产模式isProduction && new MiniCssExtractPlugin( // 定义输出文件名和目录{// 定义输出文件名和目录filename: "static/css/[name].[contenthash:10].css",//动态导入也有csschunkFilename: "static/css/[name].[contenthash:10].chunk.css",}),//复制public资源到index里面isProduction && new CopyPlugin({patterns: [{from: path.resolve(__dirname, "../public"),//将public包含index文件to: path.resolve(__dirname, "../dist"),//复制到dist目录下 globOptions: {// 忽略index.html文件ignore: ["**/index.html"],},},],}),].filter(Boolean),//有可能有有可能没有需要过滤// 模式mode: isProduction ? "production" : "development",// 模式配置devtool: isProduction ? "source-map" : "cheap-module-source-map",//设置调试更加友好//代码分割optimization: {splitChunks: {chunks: "all",cacheGroups: {// layouts通常是admin项目的主体布局组件，所有路由组件都要使用的// 可以单独打包，从而复用// 如果项目中没有，请删除layouts: {name: "layouts",test: path.resolve(__dirname, "../src/layouts"),priority: 40,},// 如果项目中使用antd，此时将所有node_modules打包在一起，那么打包输出文件会比较大。// 所以我们将node_modules中比较大的模块单独打包，从而并行加载速度更好// 如果项目中没有，请删除antd: {name: "chunk-antd",test: /[\\/]node_modules[\\/]antd(.*)/,priority: 30,},// 将react相关的库单独打包，减少node_modules的chunk体积。react: { //减小代码体积-reac-dom react-router-dom一起打包成单独文件name: "react",test: /[\\/]node_modules[\\/]react(.*)?[\\/]/,chunks: "initial",//打包文件名priority: 20,//打包权重},libs: {//其他文件name: "chunk-libs",test: /[\\/]node_modules[\\/]/,priority: 10, // 权重最低，优先考虑前面内容chunks: "initial",},},},// 提取runtime文件runtimeChunk: {//会导致缓存失效-处理name: (entrypoint) => `runtime~${entrypoint.name}`,},minimize: isProduction,//是否需要压缩控制 true 要 false不要//压缩cssminimizer: [// css压缩也可以写到optimization.minimizer里面，效果一样的//压缩cssnew CssMinimizerPlugin(),// 当生产模式会默认开启TerserPlugin，但是我们需要进行其他配置，就要重新写了//压缩jsnew TerserPlugin(),],},// 开发服务器-自动编译// eslint-disable-next-line no-dupe-keysdevServer: { // 开发服务器不会输出资源，再内存编译中打包host: "localhost", // 启动服务器域名port: "3000", // 启动服务器端口号open: true, // 是否自动打开浏览器hot: true,//开启HMR功能（只能用于开发环境，生产环境不需要了）historyApiFallback: true, // 解决react-router刷新404问题},//webpack解析模块加载选项resolve: {//自动补全文件扩展名extensions: ['.jsx', '.js', '.json']},performance:false};
