webpack实用配置dev--react（一）

已于 2023-06-16 22:56:28 修改
阅读量453 收藏 1
点赞数 1
分类专栏： webpack react 文章标签： webpack react.js javascript
于 2023-05-05 21:27:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27829333/article/details/130515554
版权

一直以来都是使用脚手架创建应用，现在有空认真研究了一下webpack5，从零开始搭建项目，受益颇多，记下心得，以供参考，生产环境请参考生产环境配置。

准备工作

  1. 新建项目空白目录 ，并运行npm init -y 命令，初始化包管理配置文件 package.json
  2. 新建config目录 -> webpack.dev.js，webpack开发环境配置
  3. 新建public目录 -> index.html
  4. 新建src目录 -> main.js、app.jsx
<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="favicon.ico" ref="shortcut" type="image/x-iocn" />
  <title>Webpack React Cli</title>
</head>
<body>
  <div id="app"></div>
</body>
<!-- 通过插件自动引入 html-webpack-plugin-->
<!-- <script src="../dist/static/js/main.js"></script> -->
</html>

// main.js

import React from "react";
import ReactDom from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
const root = ReactDom.createRoot(document.getElementById("app"));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

// App.jsx
import React, { lazy, Suspense } from "react";
import { Link, Route, Routes } from "react-router-dom";
// 路由懒加载
const Home = lazy(() => import(/* webpackChunkName: 'home' */ "./pages/Home"));
const About = lazy(() => import(/* webpackChunkName: 'about' */"./pages/About"));
function App() {
  return (
    <div>
      <ul>
        <li>
          <Link to="/home">home</Link>
        </li>
        <li>
          <Link to="/about">about</Link>
        </li>
      </ul>
      <Suspense>
        <Routes fallback={<div>loading</div>}>
          <Route path="/home" element={<Home />}></Route>
          <Route path="/about" element={<About />}></Route>
        </Routes>
      </Suspense>
    </div>
  );
}
export default App;

配置 package.json

在这里把所有需要的依赖全部安装一下

{
  "name": "webpack_react_cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "npm run dev",
    "dev": "cross-env NODE_ENV=development webpack server --config ./config/webpack.dev.js",
    "build": "cross-env NODE_ENV=production webpack --config ./config/webpack.prod.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "browserslist": [
    "last 2 version",
    "> 1%",
    "not dead"
  ],
  "devDependencies": {
    "@babel/core": "^7.21.5",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
    "babel-loader": "^9.1.2",
    "babel-preset-react-app": "^10.0.1",
    "copy-webpack-plugin": "^11.0.0",
    "cross-env": "^7.0.3",
    "css-loader": "^6.7.3",
    "css-minimizer-webpack-plugin": "^5.0.0",
    "eslint": "^8.39.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-webpack-plugin": "^4.0.1",
    "html-webpack-plugin": "^5.5.1",
    "image-minimizer-webpack-plugin": "^3.8.2",
    "imagemin-gifsicle": "^7.0.0",
    "imagemin-jpegtran": "^7.0.0",
    "imagemin-optipng": "^8.0.0",
    "imagemin-svgo": "^10.0.1",
    "less-loader": "^11.1.0",
    "mini-css-extract-plugin": "^2.7.5",
    "postcss-loader": "^7.3.0",
    "postcss-preset-env": "^8.3.2",
    "progress-bar-webpack-plugin": "^2.1.0",
    "react-refresh": "^0.14.0",
    "sass-loader": "^13.2.2",
    "style-loader": "^3.3.2",
    "terser-webpack-plugin": "^5.3.7",
    "thread-loader": "^4.0.1",
    "webpack": "^5.81.0",
    "webpack-cli": "^5.0.2",
    "webpack-dev-server": "^4.13.3",
    "webpackbar": "^5.0.2",
    "workbox-webpack-plugin": "^6.5.4"
  },
  "dependencies": {
    "antd": "^5.4.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.11.0"
  },
  "resolutions": {
    "//": "Used to install imagemin dependencies, because imagemin may not be installed in China. If it is abroad, you can delete it",
    "bin-wrapper": "npm:bin-wrapper-china",
    "rollup": "^2.72.0"
  }
}

webpack 配置

基础配置

通过entry节点指定打包的入口，通过output节点指定打包的出口，配置模式mode，自动解析文件类型等。

// webpack.dev.js

module.exports = {
  entry: "./src/main.js",
  // 开发服务器不会输出资源，在内存中编译打包
  output: {
    filename: "static/js/[name].js",
    chunkFilename: "static/js/[name].chunk.js",
    assetModuleFilename: "static/media/[hash:10][ext][query]",
  },
  mode: "development",
  devServer: {
    open: true, // 是否自动打开浏览器
    port: 3000, // 启动服务器端口
    host: "localhost",  // 启动服务器域名
    // 模块热替换(HMR - hot module replacement)功能会在应用程序运行过程中，替换、添加或删除 模块，而无需重新加载整个页面。主要是通过以下几种方式，来显著加快开发速度：
    // 保留在完全重新加载页面期间丢失的应用程序状态。
    // 只更新变更内容，以节省宝贵的开发时间。
    // 在源代码中 CSS/JS 产生修改时，会立刻在浏览器中进行更新，这几乎相当于在浏览器 devtools 直接更改样式。
    hot: true,
    // 解决开发时刷新404
    // 当使用HTML5 History API时，可能必须使用index.html页面来代替任何404响应。通过将devServer.historyPiFallback设置为true来启用它
    historyApiFallback: true,
  },
  devtool: "source-map",
  resolve: {
    // 自动解析文件扩展名
    extensions: [
      ".web.mjs",".mjs",".web.js",".js",".web.ts",".ts"  ,".web.tsx",".tsx",".json",".web.jsx",".jsx"
    ],
  },
}

配置 loader

loader 从右到左（或从下到上）的解析执行，所以写法要谨慎。

  1. style-loader，把 CSS以style标签的形式 插入到 head 中
  2. css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样
  3. postcss-loader，处理css兼容性问题，配合package.json中browserslist来指定兼容性
  4. less-loader，加载 Less 文件并将他们编译为 CSS
  5. sass-loader，加载 Sass/SCSS 文件并将他们编译为 CSS
  6. babel-loader，在旧的浏览器或环境中将ECMAScript 2015+ 代码转换为向后兼容的 js 代码，可以配合根目录babel.config.js使用
// babel.config.js

module.exports = {
  // 智能预设，能够编译es6语法
  // https://github.com/facebook/create-react-app/blob/main/packages/babel-preset-react-app/create.js
  presets: [
    "react-app"
  ],
  "compact": true
};

// webpack.dev.js

const path = require("path");
function getStyLoader(pre) {
  return [
    "style-loader",
    {
      loader: "css-loader",
      options: {
        // 开启模块化
        modules: {
          mode: "local",
          // 自动匹配module.css开启模块化
          auto: true,
          localIdentName: "[path][name]__[local]--[hash:5]",
          exportLocalsConvention: "camelCase",
        },
      },
    },
    // 处理兼容性，配合package.json中的browserslist使用
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            [
              "postcss-preset-env",
              {
                // 其他选项
              },
            ],
          ],
        },
      },
    },
    pre,
  ].filter(Boolean); // 过滤掉underfind
}
module.exports = {
  module: {
    rules: [
      // 处理css
      {
        test: /\.css$/i,
        use: getStyLoader(),
      },
      {
        test: /\.less$/i,
        use: getStyLoader("less-loader"),
      },
      {
        test: /\.s[ac]ss$/i,
        use: getStyLoader("sass-loader"),
      },
      // 处理图片
      {
        test: /\.(png|jpe?g|gif|webp)$/i,
        // asset可以转换base64
        type: "asset",
        parser: {
          dataUrlCondition: {
            // 小于4kb转化成base64.减少请求，资源会变大一些
            maxSize: 4 * 1024, // 4kb
          },
        },
        generator: {
          // :8,hash钱8位
          filename: "static/images/[hash:8][ext]",
        },
      },
      {
        test: /\.(ttf|mp4)$/i,
        // asset/resource 原封不动输出
        type: "asset/resource",
        // generator: {
        //   // :8,hash钱8位
        //   filename: "static/fonts/[hash:8][ext]",
        // },
      },
      // 处理js
      {
        test: /\.jsx?$/,
        // exclude: /(node_modules)/, // 排除的文件
        include: [path.resolve(__dirname, "../src")],
        use: [
          {
            loader: "babel-loader",
            options: {
              cacheDirectory: true, // 开启缓存
              cacheCompression: false, // 关闭缓存压缩
              plugins: ["react-refresh/babel"], // HMR js
            },
          },
        ],
      },
    ],
  },
};

配置 plugin

  1. eslint-webpack-plugin，eslint检验，配合根目录.eslintrc.js使用
// .eslintrc.js

module.exports = {
  extends: ["react-app"], // 继承 react 官方规则
  parserOptions: {
    babelOptions: {
      presets: [
        // 解决页面报错问题
        ["babel-preset-react-app", false],
        "babel-preset-react-app/prod",
      ],
    },
  },
};
  1. html-webpack-plugin，配置html模板，将js自动添加到html中
  2. @pmmmwh/react-refresh-webpack-plugin，模块热替换，自动更新js模块，而不是刷新页面，css热替换在style-loader中实现
// webpack.dev.js

const path = require("path");
// eslint检验
const ESLintPlugin = require("eslint-webpack-plugin");
// html模板
const HtmlWebpackPlugin = require("html-webpack-plugin");
// HMR
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
module.exports = {
  // 配置plugins
  plugins: [
    new ESLintPlugin({
      // 检查哪些文件
      context: path.resolve(__dirname, "../src"),
      exclude: "node_modules",
      cache: true, // 开启缓存
      // 缓存目录
      cacheLocation: path.resolve(__dirname, "../node_modules/.cache/eslint"),
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // HMR js
    new ReactRefreshWebpackPlugin(),
  ],
  optimization: {
    // 代码分割
    splitChunks: {
      // include all types of chunks
      chunks: "all",
      cacheGroups: {
        // react react-dom react-router-dom 一起打包成一个js文件
        react: {
          test: /[\\/]node_modules[\\/]react(.*)?[\\/]/,
          name: "chunk-react",
          priority: 40,
        },
        // antd 单独打包
        antd: {
          test: /[\\/]node_modules[\\/]antd[\\/]/,
          name: "chunk-antd",
          priority: 30,
        },
        // 剩下node_modules单独打包
        libs: {
          test: /[\\/]node_modules[\\/]/,
          name: "chunk-libs",
          priority: 20,
        },
      },
    },
    runtimeChunk: {
      name: (entrypoint) => `runtime~${entrypoint.name}`,
    },
  },
};

完整的 webpack.dev.js 配置

// webpack.dev.js

const path = require("path");
// eslint检验
const ESLintPlugin = require("eslint-webpack-plugin");
// html模板
const HtmlWebpackPlugin = require("html-webpack-plugin");
// HMR
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
function getStyLoader(pre) {
  return [
    "style-loader",
    {
      loader: "css-loader",
      options: {
        modules: {
          mode: "local",
          auto: true,
          localIdentName: "[path][name]__[local]--[hash:5]",
          exportLocalsConvention: "camelCase",
        },
      },
    },
    // 处理兼容性，配合package.json中的browserslist使用
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            [
              "postcss-preset-env",
              {
                // 其他选项
              },
            ],
          ],
        },
      },
    },
    pre,
  ].filter(Boolean); // 过滤掉underfind
}
module.exports = {
  entry: "./src/main.js",
  // 开发服务器不会输出资源，在内存中编译打包
  output: {
    filename: "static/js/[name].js",
    chunkFilename: "static/js/[name].chunk.js",
    assetModuleFilename: "static/media/[hash:10][ext][query]",
  },
  mode: "development",
  devServer: {
    open: true, // 是否自动打开浏览器
    port: 3000, // 启动服务器端口
    host: "localhost", // 启动服务器域名
    // 模块热替换(HMR - hot module replacement)功能会在应用程序运行过程中，替换、添加或删除 模块，而无需重新加载整个页面。主要是通过以下几种方式，来显著加快开发速度：
    // 保留在完全重新加载页面期间丢失的应用程序状态。
    // 只更新变更内容，以节省宝贵的开发时间。
    // 在源代码中 CSS/JS 产生修改时，会立刻在浏览器中进行更新，这几乎相当于在浏览器 devtools 直接更改样式。
    hot: true,
    // 解决开发时刷新404
    // 当使用HTML5 History API时，可能必须使用index.html页面来代替任何404响应。通过将devServer.historyPiFallback设置为true来启用它
    historyApiFallback: true,
  },
  devtool: "source-map",
  resolve: {
    // 自动解析文件扩展名
    extensions: [
      ".web.mjs",
      ".mjs",
      ".web.js",
      ".js",
      ".web.ts",
      ".ts",
      ".web.tsx",
      ".tsx",
      ".json",
      ".web.jsx",
      ".jsx",
    ],
  },
  module: {
    rules: [
      // 处理css
      {
        test: /\.css$/i,
        use: getStyLoader(),
      },
      {
        test: /\.less$/i,
        use: getStyLoader("less-loader"),
      },
      {
        test: /\.s[ac]ss$/i,
        use: getStyLoader("sass-loader"),
      },
      // 处理图片
      {
        test: /\.(png|jpe?g|gif|webp)$/i,
        // asset可以转换base64
        type: "asset",
        parser: {
          dataUrlCondition: {
            // 小于4kb转化成base64.减少请求，资源会变大一些
            maxSize: 4 * 1024, // 4kb
          },
        },
        generator: {
          // :8,hash钱8位
          filename: "static/images/[hash:8][ext]",
        },
      },
      {
        test: /\.(ttf|mp4)$/i,
        // asset/resource 原封不动输出
        type: "asset/resource",
        // generator: {
        //   // :8,hash钱8位
        //   filename: "static/fonts/[hash:8][ext]",
        // },
      },
      // 处理js
      {
        test: /\.jsx?$/,
        // exclude: /(node_modules)/, // 排除的文件
        include: [path.resolve(__dirname, "../src")],
        use: [
          {
            loader: "babel-loader",
            options: {
              cacheDirectory: true, // 开启缓存
              cacheCompression: false, // 关闭缓存压缩
              plugins: ["react-refresh/babel"], // HMR js
            },
          },
        ],
      },
    ],
  },
  //
  plugins: [
    new ESLintPlugin({
      // 检查哪些文件
      context: path.resolve(__dirname, "../src"),
      exclude: "node_modules",
      cache: true, // 开启缓存
      // 缓存目录
      cacheLocation: path.resolve(__dirname, "../node_modules/.cache/eslint"),
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // HMR js
    new ReactRefreshWebpackPlugin(),
  ],
  optimization: {
    // 代码分割
    splitChunks: {
      // include all types of chunks
      chunks: "all",
      cacheGroups: {
        // react react-dom react-router-dom 一起打包成一个js文件
        react: {
          test: /[\\/]node_modules[\\/]react(.*)?[\\/]/,
          name: "chunk-react",
          priority: 40,
        },
        // antd 单独打包
        antd: {
          test: /[\\/]node_modules[\\/]antd[\\/]/,
          name: "chunk-antd",
          priority: 30,
        },
        // 剩下node_modules单独打包
        libs: {
          test: /[\\/]node_modules[\\/]/,
          name: "chunk-libs",
          priority: 20,
        },
      },
    },
    runtimeChunk: {
      name: (entrypoint) => `runtime~${entrypoint.name}`,
    },
  },
};
小小•愿望
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
使用webpack构建react - 配置篇
zyym9009的博客
03-13 164
首先配置webpack配置文件： ./config/dev.js const path = require("path"); const WebpackHtmlPlugin = require('webpack-html-plugin'); //配置webpack-html-plugin 插件 const webpackHtmlPlugin = new WebpackHtmlPlugin({ ...
react-dev-utils:Webpack 4兼容的react-dev-utlis，https的独立fork
05-16
react-dev-utils 该软件包包括使用的一些实用。 请参考其文档： –如何创建新应用。 –如何开发使用Create React App引导的应用程序。 在创建React App项目中的用法 这些实用程序默认包含在，默认情况下包括它。 ...
基于webpack从零开始自己配置react项目
vity_tong的博客
12-03 1110
每当自己想要用心写demo的时候，会发现项目开始之前的配置总是让我很烦，如果直接使用脚手架生成一个react项目，看起来方便，但是事实上一大堆配置文件很多都用不上或者看不懂，而且本身就是基于webpack实现的，但是它的配置文件并没有暴露出来，开发者也不知到它内置了哪些功能，哪些插件，非常难受，所以从零开始配置属于自己的webpack+react项目框架
React对webpack进行配置
Motong_Lee的博客
05-23 515
每次修改了craco.config.js里的配置都需要重新运行项目。
Web前端最全Webpack搭建React开发环境，2024年最新面试哪些
最新发布
2401_84418883的博客
05-16 543
什么是MVVM？mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？组件之间的传值？Vue 双向绑定原理描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？虚拟 DOM 实现原理Vue 中 key 值的作用？Vue 的生命周期Vue 组件间通信有哪些方式?vue 中怎么重置 data?组件中写 name 选项有什么作用？Vue 的 nextTick 的原理是什么？Vuex 有哪几种属性?
webpack5搭建react框架-基础环境配置
前端三脚猫的博客
03-15 1515
通过使用webpack5搭建基础react框架来学习webpack相关知识。
react 引入less 2018/12/21
weixin_40046130的博客
12-21 1014
最新的react包 引入less npm install less less-loader --save npm run eject 暴露出webpack 找到build中webpack.config.dev.js 新版本貌似引入sass  所以我们把关于sass 替换成less就ok 将sass替换成less 将sass-loader替换成less-loader 嫌麻烦的直接复制下面代码...
react-webpack-HMR-middleware:通过webpack-dev-middleware和webpack-hot-middleware对热模块重新加载做出React
05-07
react-webpack-HMR-middleware有三种方式实现热加载:使用使用使用中间件关于怎么选择合适的方式, 这有一些简单的解释.尽可能的简化安装, 选择 webpack-dev-server CLI.如果想要使用a task runner类似于grunt 或 gulp...
详解Webpack-dev-server的proxy用法
10-18
主要介绍了详解Webpack-dev-server的proxy用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react项目实践之webpack-dev-serve
10-18
在React项目开发过程中，`webpack-dev-server`是一个不可或缺的工具，它提供了高效且便捷的本地开发环境。这个工具不仅作为一个小型的静态文件服务器，而且具备实时刷新和模块热替换（Hot Module Replacement，简称...
react-boilerplate:使用webpack-dev-server和react-hot-loader的React样板
05-15
它整合了JavaScript的最新特性，包括Webpack、webpack-dev-server和react-hot-loader等工具，为开发者提供了一个高效、灵活的开发环境。 首先，让我们深入了解一下React。React是由Facebook开发的一个用于构建用户...
React脚手架创建新项目 暴露webpack配置 支撑less语法
qq_41284481的博客
05-31 2194
1.创建项目 1.下载create-react-app，并全局安装 npm install create-react-app -g 2.接下来，我们安装我们的工程 create-react-app create-react-prj cd .\create-react-prj\ npm start 安装完成后我们可以看到当前的目录结...
第四节 react-webpack 配置优化1
MichaelAn的博客
02-13 142
第四节 react-webpack 配置优化1 以考代练(2021-10-28) webpack 有几个优化配置项(6个默写)，具体作用，怎么配置，有没有副作用(简述)？ CSS 如何进行优化(4点默写)生产环境和开发环境分别使用哪些优化？ 不同环境如何使用不同的配置文件，需要哪些库(2个)，分别是什么作用？ 优...
最新打包配置，webpack 4 配置 React 项目，同时配置DEV和PROD环境
非著名程序猿
09-13 3932
webpack 4 配置 React 项目，同时配置DEV和PROD环境 文章目录webpack 4 配置 React 项目，同时配置DEV和PROD环境1、生成一个react项目2、从零配置webapck3、设置alias别名和自动填写后缀4、配置 devServer5、解析分离less到单独的文件6、url-loader, file-loader 解析图片地址，并导出到指定文件7、多个less...
使用webpack4从零配置react项目
张致豪
11-10 1889
前言 以前做react项目的时候都是使用create-react-app脚手架初始化项目的，最近想自己从零配置webpack来实现一个react项目的初始化。 打包后的目录结构： 创建文件件sty-react-template 初始化git仓库、生成package.json文件 git init yarn init ...
一步一步进入React的世界（React+Webpack+ES6组合配置）
前端-后端学习之路
11-04 8418
看了很多博客，大都是把配置文件一笔带过，或者干脆不给出配置文件，然而环境搭建对于新手来说是既困难又重要，显然网络上的博客不利于新手开始学习。 BZ打算从从头开始，一步一步配置webpack，能够使用ES6+React组合开发，废话少说让我们一起来开始Webpack+ES6+React之旅。 可以在我的github 中clone或者fork，本博文对应demo01 https://gi
webpack+react+ES6 配置安装
持续探索前方荒凉之地
07-07 2965
如今webpack已经发布3.0.0版本。近期没事学习webpack react es6 玩玩 在此记录一下学习的过程以及遇到的一些坑，方便日后用的时候直接拿来用、不多介绍 直奔主题。 一、webpack的安装与配置： 1&gt;使用webpack，首先全局安装node（http://nodejs.cn/）官网下载稳定版4.xx或者6.xx 或者最新版8.xx 之后可在cmd中 键入node -v命
react中配置webpack，支持@符号导入模块
Wang的专栏
04-30 9342
在项目中，如果我们的路径结构很复杂，那么我们可能导入其他模块的时候不是很方便，这时候，我们可以配置webpack以配置别名的形式访问 执行eject 在项目中执行 $ npm run eject 这个命令只能执行一次，而且不可逆转，它会把react-scripts 封装的一些webpack配置等全部解压到项目目录，项目结构中会多出 config 目录 和 scripts 目录，我们...
React项目创建以及webpack配置与热更新
weixin_40200876的博客
07-27 4177
1、cd到文件夹：我以当前日期为文件夹名 2、初始化，终端输入： npm init 回车键： 输入package name，括号内是提示，你可以按照提示输入，我这就按提示输入了，回车 version：可以不输入，就直接回车了 description：可以不输入 entry point：入口文件一般都命名为index.js test command: 可以不输入 git r...
@ multi (webpack)-dev-server/client?http://10.102.133.147:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts这个错误的原因及解决办法
07-12
3. 如果你的项目是基于 Vue.js 或者 React 等框架，你可能需要检查相关配置文件（如 vue.config.js 或者 react-scripts）中的入口文件配置是否正确。 4. 检查你的项目文件结构是否正确。确保入口文件（main.ts 或者...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小小•愿望

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值