Webpack 4x 之路 （ 五 ）

最新推荐文章于 2024-10-02 15:47:16 发布
最新推荐文章于 2024-10-02 15:47:16 发布
阅读量93 收藏
点赞数
文章标签： webpack javascript 前端 ViewUI
原文链接：https://segmentfault.com/a/1190000014216776
版权

在上一篇中我们在html文件中也引用了一张图片，打包完毕后在浏览器控制台报错：

GET file:///D:/myweb/webpack/webpack_study_demo/webpack_new_test/dist/src/asserts/login1.png net::ERR_FILE_NOT_FOUND
// 意思是图片没找到，下面我们就来学习怎么处理HTML中的图片路径问题了
处理HTML中的图片路径问题

webpack处理资源无往不利，但有个问题总是很苦恼，html中直接使用img标签src加载图片的话，因为没有被依赖，图片将不会被打包。这个loader解决这个问题，图片会被打包，而且路径也处理妥当。额外提供html的include子页面功能。

安装

$ cnpm install html-withimg-loader --save

html-withimg-loader

// webpack.config.js
// 然后在生产环境下增加下列代码
config.module.rules.push(
    {
      test: /\.(htm|html)$/i,
      loader: 'html-withimg-loader'
    }
  )
$ npm run build
// 然后你就会发现上面的那个问题得到了解决，图片成功显示，被转为了base64格式写入了
css进阶： less文件的打包与处理

安装less服务

$ cnpm install less less-loader --save-dev
// webpack.config.js
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin')
var webpack = require('webpack')
const isDev = process.env.NODE_ENV === 'development'
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 分离css
const uglify = require('uglifyjs-webpack-plugin');// js代码压缩插件

const config = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(jpg|png|svg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit:500000,
              name: 'images/[name]-[hash].[ext]'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: 'body'
    }),
    new webpack.HotModuleReplacementPlugin()
  ]
}

if (isDev) {
  // 开发环境下
  config.devServer = {
    host: 'localhost',    // 服务器的IP地址，可以使用IP也可以使用localhost
    compress: true,    // 服务端压缩是否开启
    port: 3000, // 端口
    hot: true,
    open: true
  }

  config.module.rules.push(
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    },
    {                                // 【1】 在开发模式下处理，这里使用的依旧是style-loader
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'less-loader'] 
    }
  )
} else {
  // 生产模式下
  config.plugins.push(new uglify())
  config.plugins.push(
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  )

  config.module.rules.push(
    {
      test: /\.css$/,
      use: [ MiniCssExtractPlugin.loader, 'css-loader']
    },
    {
      test: /\.less$/,                    //【2】 在生产模式下，这里实现了less的分离
      use: [ MiniCssExtractPlugin.loader, 'css-loader','less-loader']
    }
  )
  config.module.rules.push(
    {
      test: /\.(htm|html)$/i,
      loader: 'html-withimg-loader'
    }
  )
}

module.exports = config;
$ npm run build
// 打包成功
css进阶 : SASS打包与处理

安装

$ cnpm install sass --save-dev

这里需要 在项目目录下用npm安装两个包。node-sass和sass-loader
因为sass-loader依赖于node-sass，所以需要先安装node-sass

$ cnpm install sass-loader --save-dev
$ cnpm install node-sass@4.5.3 --save-dev
// sass.scss
$nav-color: #FFF;
#nav {
  $width: 100%;
  width: $width;
  height:30px;
  background-color: $nav-color;
}
// 与上面处理less是一样的做法
// webpack.config.js
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin')
var webpack = require('webpack')
const isDev = process.env.NODE_ENV === 'development'
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 分离css
const uglify = require('uglifyjs-webpack-plugin');// js代码压缩插件

const config = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(jpg|png|svg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit:500000,
              name: 'images/[name]-[hash].[ext]'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: 'body'
    }),
    new webpack.HotModuleReplacementPlugin()
  ]
}

if (isDev) {
  // 开发环境下
  config.devServer = {
    host: 'localhost',    // 服务器的IP地址，可以使用IP也可以使用localhost
    compress: true,    // 服务端压缩是否开启
    port: 3000, // 端口
    hot: true,
    open: true
  }

  config.module.rules.push(
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    },
    {
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'less-loader'] 
    },
    {
      test: /\.scss$/,             // 【1】 
      use: ['style-loader', 'css-loader', 'sass-loader']
    }
  )
} else {
  // 生产模式下
  config.plugins.push(new uglify())
  config.plugins.push(
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  )

  config.module.rules.push(
    {
      test: /\.css$/,
      use: [ MiniCssExtractPlugin.loader, 'css-loader']
    },
    {
      test: /\.less$/,
      use: [ MiniCssExtractPlugin.loader, 'css-loader','less-loader']
    },
    {
      test: /\.scss$/,            // 【2】
      use: [ MiniCssExtractPlugin.loader, 'css-loader','sass-loader']
    }
  )
  config.module.rules.push(
    {
      test: /\.(htm|html)$/i,
      loader: 'html-withimg-loader'
    }
  )
}

module.exports = config;

// $ npm run build
// 没问题
处理css前缀

CSS3已经成了前端的必会技能，但是你一定为那些属性需要加前缀,以满足不同浏览器的兼容，这节课我们就学习一下如何通过postcss-loader给css3属性自动添加前缀。

为了浏览器的兼容性，有时候我们必须加入-webkit,-ms,-o,-moz这些前缀。目的就是让我们写的页面在每个浏览器中都可以顺利运行。

postcss就是一个css的处理器，它有一项非常好的功能就是可以为css添加前缀，这将会使得我们的开发变得非常快速

安装

$  cnpm install --save-dev postcss-loader autoprefixer
// 以及其他插件
$  cnpm install postcss-import --save-dev
$  cnpm install postcss-cssnext --save-dev //一个模块化的缩小器，建立在PostCSS生态系统之上。看到的代码压缩间距就是这个插件的效果
// 样式编写，在每一个样式文件中都加这个
div{
    display: flex;
}
// webpack.config.js
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin')
var webpack = require('webpack')
const isDev = process.env.NODE_ENV === 'development'
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 分离css
const uglify = require('uglifyjs-webpack-plugin');// js代码压缩插件

const config = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(jpg|png|svg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 500000,
              name: 'images/[name]-[hash].[ext]'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: 'body'
    }),
    new webpack.HotModuleReplacementPlugin()
  ]
}

if (isDev) {
  // 开发环境下
  config.devServer = {
    host: 'localhost',    // 服务器的IP地址，可以使用IP也可以使用localhost
    compress: true,    // 服务端压缩是否开启
    port: 3000, // 端口
    hot: true,
    open: true
  }

  config.module.rules.push(
    {
      test: /\.css$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1
          }
        },
        {
          loader: 'postcss-loader',            // 【1】 加入了postcss-loader
          options: {
            ident: 'postcss',
            plugins: (loader) => [                // 【2】这里使用了一些插件
              require('postcss-import')({ root: loader.resourcePath }),
              require('postcss-cssnext')(),
              require('autoprefixer')(),
              require('cssnano')()
            ]
          }
        }

      ]
    },
    {
      test: /\.less$/,
      use: [
        {
          loader: 'style-loader'
        },
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1
          }
        },
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: (loader) => [
              require('postcss-import')({ root: loader.resourcePath }),
              require('postcss-cssnext')(),
              require('autoprefixer')(),
              require('cssnano')()
            ]
          }
        },
        {
          loader: 'less-loader' // 如果less文件中使用了@import 引入了别的less文件，这里可以不用设置importLoaders
        }
      ]
    },
    {
      test: /\.scss$/,
      use: [
        {
          loader: 'style-loader'
        },
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1
          }
        },
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: (loader) => [
              require('postcss-import')({ root: loader.resourcePath }),
              require('postcss-cssnext')(),
              require('autoprefixer')(),
              require('cssnano')()
            ]
          }
        },
        {
          loader: 'sass-loader'
        }
      ]
    }
  )
} else {
  // 生产模式下
  config.plugins.push(new uglify())
  config.plugins.push(
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  )

  config.module.rules.push(
    {
      test: /\.css$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
          loader: 'postcss-loader',            //【3】在生产模式下的修改，这里要注意的是位置的放置
          options: {
            ident: 'postcss',
            plugins: (loader) => [
              require('postcss-import')({ root: loader.resourcePath }),
              require('postcss-cssnext')(),
              require('autoprefixer')(),
              require('cssnano')()
            ]
          }
        }
      ]
    },
    {
      test: /\.less$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: (loader) => [
              require('postcss-import')({ root: loader.resourcePath }),
              require('postcss-cssnext')(),
              require('autoprefixer')(),
              require('cssnano')()
            ]
          }
        },
        'less-loader'
      ]
    },
    {
      test: /\.scss$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: (loader) => [
              require('postcss-import')({ root: loader.resourcePath }),
              require('postcss-cssnext')(),
              require('autoprefixer')(),
              require('cssnano')()
            ]
          }
        },
        'sass-loader'
      ]
    }
  )
  config.module.rules.push(
    {
      test: /\.(htm|html)$/i,
      loader: 'html-withimg-loader'
    }
  )
}

module.exports = config;

// postcss使用
// 将`postcss-loader`添加到 `webpack.config.js` 中，您可以单独的使用它，也可以是与 `css-loader` 一起使用。在css-loader和style-loader之后使用它,但是在其他预处理器加载器(如less-loader)之前使用它
$ npm run dev
// 执行后发现前缀添加完毕,并且代码做了一定的压缩
使用babel

babel可以干什么呢？

  1. 可以让你使用使用下一代javascript代码（ES6\ES7）,即使这些标准目前还没有被所有浏览器所支持
  2. 使用基于javascript进行了扩展的语言，比如React的jsx;

安装

$ cnpm install babel-core babel-loader babel-preset-env --save-dev
// 再目录下建立.babelrc文件
{
    "presets":["env"]
}
// webpack.config.js
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin')
var webpack = require('webpack')
const isDev = process.env.NODE_ENV === 'development'
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 分离css
const uglify = require('uglifyjs-webpack-plugin');// js代码压缩插件
const glob = require('glob');
const PurifyCSSPlugin = require("purifycss-webpack");


const config = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(jpg|png|svg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 500000,
              name: 'images/[name]-[hash].[ext]'
            }
          }
        ]
      },
      {
        test: /\.js$/,            // 【1】 更改这里
        use: [
          'babel-loader'
        ],
        exclude: /(node_modules|bower_components)/  // 优化处理加快速度
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: 'body'
    }),
    new webpack.HotModuleReplacementPlugin(),
    new PurifyCSSPlugin({
      // Give paths to parse for rules. These should be absolute!
      paths: glob.sync(path.join(__dirname, 'src/*.html')),
    })
  ]
}

if (isDev) {
  // 开发环境下
  config.devServer = {
    host: 'localhost',    // 服务器的IP地址，可以使用IP也可以使用localhost
    compress: true,    // 服务端压缩是否开启
    port: 3000, // 端口
    hot: true,
    open: true
  }

  config.module.rules.push(
    {
      test: /\.css$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1
          }
        },
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: (loader) => [
              require('postcss-import')({ root: loader.resourcePath }),
              require('postcss-cssnext')(),
              require('autoprefixer')(),
              require('cssnano')()
            ]
          }
        }

      ]
    },
    {
      test: /\.less$/,
      use: [
        {
          loader: 'style-loader'
        },
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1
          }
        },
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: (loader) => [
              require('postcss-import')({ root: loader.resourcePath }),
              require('postcss-cssnext')(),
              require('autoprefixer')(),
              require('cssnano')()
            ]
          }
        },
        {
          loader: 'less-loader' // 如果less文件中使用了@import 引入了别的less文件，这里可以不用设置importLoaders
        }
      ]
    },
    {
      test: /\.scss$/,
      use: [
        {
          loader: 'style-loader'
        },
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1
          }
        },
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: (loader) => [
              require('postcss-import')({ root: loader.resourcePath }),
              require('postcss-cssnext')(),
              require('autoprefixer')(),
              require('cssnano')()
            ]
          }
        },
        {
          loader: 'sass-loader'
        }
      ]
    }
  )
} else {
  // 生产模式下
  config.plugins.push(new uglify())
  config.plugins.push(
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  )

  config.module.rules.push(
    {
      test: /\.css$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: (loader) => [
              require('postcss-import')({ root: loader.resourcePath }),
              require('postcss-cssnext')(),
              require('autoprefixer')(),
              require('cssnano')()
            ]
          }
        }
      ]
    },
    {
      test: /\.less$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: (loader) => [
              require('postcss-import')({ root: loader.resourcePath }),
              require('postcss-cssnext')(),
              require('autoprefixer')(),
              require('cssnano')()
            ]
          }
        },
        'less-loader'
      ]
    },
    {
      test: /\.scss$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: (loader) => [
              require('postcss-import')({ root: loader.resourcePath }),
              require('postcss-cssnext')(),
              require('autoprefixer')(),
              require('cssnano')()
            ]
          }
        },
        'sass-loader'
      ]
    }
  )
  config.module.rules.push(
    {
      test: /\.(htm|html)$/i,
      loader: 'html-withimg-loader'
    }
  )
}

module.exports = config;

测试

// index.js
import './styles/reset.css';
import './styles/index.css';
import './styles/base.less';
import './styles/sass.scss';

{
    let title = 'hello';
    document.getElementById('title').innerHTML = title;
}

// 测试发现没问题
感谢您的支持！！
weixin_34319817
关注
React+webpack4x+bootstrap
04-22
React+webpack4x+bootstrap 是一个常见的前端开发组合，用于构建高效、响应式的Web应用程序。这个项目整合了React（一个JavaScript库，用于构建用户界面），webpack 4.x（一个模块打包工具），以及Bootstrap（一个...
webpack4x+React 组件使用
04-21
Webpack 4x 和 React 的结合使用是现代前端开发中的常见实践。Webpack 是一个模块打包工具，它能够将 JavaScript 模块和其他资源转换成适合浏览器加载的格式。React 则是 Facebook 推出的一个用于构建用户界面的库，...
vue-cli4 修改webpack相关配置
u010227042的博客
03-08 2607
用了很久的vue脚手架2。最近终于决定苦心学习一下4。到处找大神们的笔记学习、总计。闲话少说。配置贴上。 1.一些关于多页面应用的配置; 2.关于性能优化的配置(compression-webpack-plugin, webpack-bundle-analyzer); 3.也有对于plugins及module的链式修改(mini-css-extract-plugin); 项目地址 https://github.com/getSpidd/vue-cli4-webpack // cons..
webpack4配置详解之常用插件分享
weixin_34115824的博客
11-19 208
2019独角兽企业重金招聘Python工程师标准>>> ...
Webpack 4x 之路 （ 二 ）
weixin_34396902的博客
04-03 55
服务于热更新 作为一个前端工程师，最大的编程需求应该就是所见即所得的工具了。webpack 3x之后实现了热更新的功能。 webpack-dev-server 安装 $ cnpm install webpack-dev-server --save-dev 在使用之前我们需要先来了解一下开发环境和生产环境 了。 开发环境： 在开发时需要的环...
Webpack 4x 之路 （ 三 ）
weixin_34389926的博客
04-03 81
打包css文件 这节课我们就学习一个重要的知识，把我们的CSS文件打包。在学习CSS打包之前，需要先对webpack.config.js里的Loaders配置项进行了解。 Loader Loader是webpack最重要的一个功能之一，通过不同的loader，webpack可以对不同的文件格式进行特定的处理。 Loader 的配置选项： ...
Webpack 4x 之路 （ 一 ）
weixin_34364135的博客
04-02 135
为什么需要webpack呢 现在的前端网页非常丰富，特别是SPA技术流行后，js的复杂度增加并且有时需要一大堆的依赖包，还需要解决SCSS Less 等css预处理等的编译工作。所以现在的前端已经相当依赖 webpack 来更好的管理项目了。 现在所流行的vue react angluar 已经和webpack非常的密切了，官方都推出了和...
Webpack 4x 之路 （ 四 ）
weixin_33748818的博客
04-04 111
上一节我们学习了，如何处理引入的css文件，这节我们就来学习如何处理css中的图片问题吧。 css中图片处理 //我在 src/aseerts 下放了几张图片 // 然后在 src/styles/index.css中使用这些图片 // index.css .img { width: 500px; height: 450p...
webpack4x详解
qq_1518671828欢迎打扰
03-06 350
webpack已经是前端开发必不可少的神器了； 一、#先看看他的核心功能，为什么用他?# 1.打包:可以把多个Javascript文件打包成一个文件，减少服务器压力和下载带宽。 2.转换：把拓展语言转换成为普通的JavaScript，让浏览器顺利运行。 3.优化:前端变的越来越复杂后，性能也会遇到问题，而WebPack也开始肩负起了优化和提升性能的责任。 4.Webpack在生产环境中有...
WebPack4x配置使用Vue组件
玲曦的博客
12-01 165
需要下载的插件: npm i vue-loader vue-template-compiler -d webpack.config.js配置文件配置匹配规则: {test:/\.vue$/,use:'vue-loader'}// 处理.vue文件的loader 同时webpack.config.js下plugins要配置(不配置可能导致报错!) 先引入: const VueLoaderPlug...
webpack-gui:webpack配置生成器
05-03
当前活动的早午餐-dev4x（为相应的Webpack版本构建配置-4.xx）。 一些功能仍在开发中： : 要添加您喜欢的加载器/插件： 只需通过PM向我发送所需的配置部分，或提出一个问题，我将添加一个。 一般开发人员信息 ...
Webpack 特性探讨：CDN、分包、Tree Shaking 与热更新
前端探索者
09-29 1027
Webpack 作为现代前端开发中的核心构建工具，提供了丰富的特性来帮助开发者优化和打包应用。本文将探讨 Webpack 的 CDN 集成、代码分包、Tree Shaking 以及热更新（HMR）等关键特性。我们将使用前一篇文章中的代码，然后我们引入一些图片、css 等资源文件已经一些常用的第三方库，如lodash。
Webpack和GuIp打包原理以及不同
qq_39056703的博客
09-28 468
然后，Webpack会按照指定的规则将这些模块打包成一个或多个bundle文件，这些bundle文件包含了应用程序运行所需的所有资源，并且通过加载器（loader）和插件（plugins）对资源进行预处理和后处理，以满足生产环境的需求。Gulp的打包过程主要依赖于流（stream）的概念，它允许数据从一个task流向另一个task，每个task可以对数据进行处理（如压缩、合并等），并将处理后的数据传递给下一个task。
个人文章合集 - 前端相关
王小二(海阔天空)
09-29 273
前端：简述表单提交前如何进行数据验证 前端：项目一个html中如何引入另一个html？ 前端：一张图快速记忆CSS所有属性 前端：三个CSS预处理器(框架)-Sass、LESS 和 Stylus的比较Jquery：验证InputFile选中的文件类型Vue：简述对Vue的简单认识 Vue：Vue2.0常用的开发环境 Vue：Windows环境下搭建Vue的开发环境 Vue：优秀的Vue UI组件库总结 Vue：简述Vue开发中的NaN类型 Vue：父子组件之间的接口互调 Vue：SessionStorage
前端面试题（十）
上进！努力！！！
09-27 1090
前端面试题（十）
Webpack模式-Resolve-本地服务器
最新发布
qq_45730399的博客
10-02 421
Resolve解析、模式、搭建本地服务器
js逆向——webpack实战案例(一)
Tandy12356_的博客
09-28 610
首先通过跟栈的方法找到加密位置我们跟进u函数，发现是通过webpack加载的向上寻找u的加载位置，然后打上断点，刷新网页，让程序断在加载函数的位置u = r.n(a)
webpack五大核心
09-05
1. 入口(entry): Webpack通过入口点来识别应用程序的起点。入口点告诉Webpack从哪里开始构建依赖图，并且创建一个打包文件。一个应用程序通常有一个或多个入口点。 2. 输出(output): Webpack以指定的方式将打包后的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值