手把手教你从零认识webpack4.0

最新推荐文章于 2020-05-19 13:39:34 发布
最新推荐文章于 2020-05-19 13:39:34 发布
阅读量272 收藏
点赞数

原文链接：https://www.jianshu.com/p/f931f47cbf75

前言： 作为一个现代javascript 应用程序的静态模块打包器，webpack能将各种资源，如js，css， 图片等作为模块来处理，是当下前端工程化的一个很受欢迎的工具，webpack目前最新的版本是4.0，文章将在4.0 的基础上，从使用者的角度，一步步教你认识并搭建一个简单的webpack配置项目，当然webpack的配置和使用较为丰富且复杂，更多的内容需要参考webpack官网

1. 两个基本的依赖：

首先webpack 项目的两个核心基础模块是webpack 和webpack-cli，这是webpack项目构建的前提

npm install --save-dev webpack webpack-cli

2. 运行webpack

默认情况下，webpack 运行构建指令默认 以项目文件夹下的 src/index.js 作为入口文件， 运行 webpack指令会执行默认的webpack 配置文件。

而在一般情况下，需要构建符合项目要求的配置文件，可在package.json 中同过--config配置webpack的执行文件(如下)

"script":
    {
        "build": "webpack --config ./config/webpack.base.js"
    }

3. webpack 配置文件的设置

通过指定配置文件后，接下来的工作是根据需要配置执行的配置文件

// webpack.base.js

module.exports = {
    
}
3.1 入口文件

指定项目的入口文件

module.exports = {
    entry: "./****", // 指定入口文件
}
3.1 出口文件
module.exports = {
    entry: "./****", // 指定入口文件
    output: {
        path: path.resolve(__dirname, ....),// 输出路径，一般为绝对路径
        filename: '****', // 输出文件名  [hash]可以用来每次以hash值的区别生成文件
        publicPath: 'static', //输出解析文件的目录，url 相对于 HTML 页面
    },
    chunkFilename: '***'
}

注意:

// publicPath 的解释
比如 publicPath  设置为static 之后，html 页面中引用的url 会自动加上static

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>test</title>
</head>
<body>
<script type="text/javascript" src="static/bundle.67c249f5bcf3681ab97e.js"></script></body>
</html>

tips: 如何理解chunkFileName:
chunkname 是未被列入entry 中， 却有需要被打包出来的文件命名配置， 例如，某些公共模块需要单独的抽离出来，这些公共模块就可以用chunkname 来命名
可以见下面的代码分离部分

3.2 配置多个入口文件
{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

// 写入到硬盘：./dist/app.js, ./dist/search.js
3.3 clean-webpack-plugin

不断运行 webpack 的指令，每次都会生成不同的不同hash 值的js 脚本，因此，我们需要一个插件，每次构建项目之前，将原先的构建完成的文件夹删除，首选 clean-webpack-plugin 的插件 配置相关如下

 const CleanWebpackPlugin = require('clean-webpack-plugin');

 module.exports = {
     plugins: [
        new CleanWebpackPlugin(['dist'], {
            {
                root: '', // 删除文件夹的根路径
                verbose: true, // 是否打开日志
            }
        }) //  第一个参数为删除的文件夹数组
     ]
     
 }

相关参数配置clean-webpack-plugin

3.4 html-webpack-plugin

webpack 构建项目时， 通过指定的入口文件，会将所有的js css 等以依赖模块的形式打包成一个或多个的脚本文件，通常情况下，脚本文件会附属于html 文件运行，这时候需要将 打包好的脚本文件，注入到html 中， html-webpack-plugin 插件的目的是， 以一个html 为模板， 将打包好的脚本注入到模板中， 相关的配置如下

const HtmlWebpackPlugin = require('html-webpack-plugin');

new HtmlWebpackPlugin()  // 不带任何配置时， 默认会以一个内置普通的html 作为模板html

new HtmlWebpackPlugin({
    title: 'title', // 给模板中的html 注入标题， 需要在模板的html 中指明配置， <%= htmlWebpackPlugin.options.title %>
    filename: '', // 指定转换后的html 文件名
    template: './',// 模板文件的路径
    chunk: ['main']// chunk 指定了该模板导入的模块，在多页面的配置中，可以在该属性中配置多个入口中的一个或者多个脚本文件
})

4. mode 模式

所谓模式，webpack4.0默认的模式是 'production',可以通过 mode 来更改模式为'development'

module.exports = {
    mode: 'development' // 会将  process.env.NODE_ENV === 'development'
    mode: 'production' // 会将 process.env.NODE_ENV === 'production'
}

相关文章

5. webpack-dev-server

5.1 生产配置/ 开发配置

  • 生产模式下的要求： 注重模块的大小

  • 开发模式下的要求： 调试， 热更新

在生产环境中，默认会进行脚本的压缩。

在开发环境中，我们需要快速的调试代码，因此需要有一个本地的服务器环境，用于访问 webpack 构建好的静态文件，webpack-dev-server 是 webpack 官方提供的一个工具，可以基于当前的 webpack 构建配置快速启动一个静态服务。当 mode 为 development 时，会具备 hot reload 的功能，即当源码文件变化时，会即时更新当前页面，以便你看到最新的效果。

根据需要，需要将配置文件抽离成生产配置和开发配置，并留一个共同的配置文件

使用 webpack-merge 来合并对象

npm i --save-dev webpack-dev-server
// package.json
{
    "name": "development",
    "version": "1.0.0",
    "description": "",
    "main": "webpack.config.js",
    "scripts": {
     "dev": "webpack-dev-server --open", // webpack-dev-server 启动
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
  }
webpack.dev.js
    
    const merge = require('webpack-merge')
    
    module.exports = merge(base, {
        devtool: "cheap-module-eval-source-map"  
        devServer: {
            port: 8088,
            compress: true,
            ...
        }
    })

讲讲webpack-dev-server 的配置，webpack-dev-server 的配置比较多，具体可以参考webpack-dev-server官方文档

常见的配置：

  • public： 指定静态服务的域名，当你使用 Nginx 来做反向代理时，应该就需要使用该配置来指定 Nginx 配置使用的服务域名
  • port ： 指定端口号
  • openPage： 指定初次访问的页面
  • publicPath：指定构建好的静态文件在浏览器中用什么路径去访问，默认是 /，比如设为 static 时， 默认访问静态的路径变成 http://localhost:8080/static/bundle.js
  • proxy 用于配置 webpack-dev-server 将特定 URL 的请求代理到另外一台服务器上。当你有单独的后端开发服务器用于请求 API 时，这个配置相当有用
proxy: {
  '/api': {
    target: "http://localhost:3000", // 将 URL 中带有 /api 的请求代理到本地的 3000 端口的服务上
    pathRewrite: { '^/api': '' }, // 把 URL 中 path 部分的 `api` 移除掉
  },
}...

devtool 的各种模式会有另一篇文章进行讲解，敬请期待。。。

6. loader

webpack 中提供一种处理多种文件格式的机制，便是使用 loader。我们可以把 loader 理解为是一个转换器，负责把某种文件格式的内容转换成 webpack 可以支持打包的模块。

举个例子，在没有添加额外插件的情况下，webpack 会默认把所有依赖打包成 js 文件，如果入口文件依赖一个 .hbs 的模板文件以及一个 .css 的样式文件，那么我们需要 handlebars-loader 来处理 .hbs 文件，需要 css-loader 来处理 .css 文件（这里其实还需要 style-loader，后续详解），最终把不同格式的文件都解析成 js 代码，以便打包后在浏览器中运行。...

6.1 css-loader

css-loader 负责解析 CSS 代码，主要是为了处理 CSS 中的依赖，例如 @import 和 url() 等引用外部文件的声明

6.2 style-loader

style-loader 会将 css-loader 解析的结果转变成 JS 代码，运行时动态插入 style 标签来让 CSS 代码生效。

6.3 file-loader

file-loader 用来处理jpg/png/gif 等文件格式

6.4 sass-loader node-sass

这两个loader 用于解析scss 文件

module.exports = {
    module: {
        rules: [
            {
                test: /\.(css|scss)$/,
                use: [
                  process.env.NODE ? 'style-loader' : MiniCssExtractPlugin.loader,
                  'css-loader',
                  'sass-loader'
                ]
          }
        ]
    }
}
6.5 babel 相关

为什么要使用babel， 目前低版本的部分浏览器，并不支持es6的相关语法，babel 的目的就是为了讲es6 的相关语法，转换成es5 的语法

npm install -D babel-loader @babel/core @babel/preset-env

webpack 4中需要安装这三个loader
配置如下：

module.exports = {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env'],
            }
        }
      }
    ]
}

babel的三个loader 可以解决 箭头函数这类es6 语法， 但是无法解决promise， symbol 这类新增的内建对象，
因此需要引入 babel-polyfill来进行全局的转换

ps： babel-polyfill 需要放在生产依赖中， 即npm i --save babel-polyfill
并且需要配置 entry

module.exports = {
  entry: ['babel-polyfill', './src/main.js'],
  ···
}

使用前

main.f66bf9d8d1fd5b0f62ae.css   88 bytes       0  [emitted]  main
bundle.f66bf9d8d1fd5b0f62ae.js   66.6 KiB       0  [emitted]  main
main.f66bf9d8d1fd5b0f62ae.css.map  194 bytes       0  [emitted]  main
bundle.f66bf9d8d1fd5b0f62ae.js.map    219 KiB       0  [emitted]  main

使用后

main.0c090c129f1d9d4804b0.css   88 bytes       0  [emitted]  main
bundle.0c090c129f1d9d4804b0.js    154 KiB       0  [emitted]  main
main.0c090c129f1d9d4804b0.css.map  194 bytes       0  [emitted]  main
bundle.0c090c129f1d9d4804b0.js.map    219 KiB       0  [emitted]  main

tips:
可以很明显的发现，打包后的bundle会比之前要大大概100k 左右，原因是， babel-polyfill 会对全局进行改写，这样其实坏处是污染了全局的环境，并且增加了打包后的文件大小,这也是要进行安装在dependency 而不是 devDependency的原因

因此， webpack4.0 提供了另外的 plugin-transform-runtime

npm install --save-dev @babel/plugin-transform-runtime

npm install --save @babel/runtime


{
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-transform-runtime']
          }
        }
      }

7.其他plugin

在 webpack 的构建流程中，plugin 用于处理更多其他的一些构建任务。可以这么理解，模块代码转换的工作由 loader 来处理，除此之外的其他任何工作都可以交由 plugin 来完成

7.1 uglifyjs-webpack-plugin

uglifyjs-webpack-plugin 是用来对js 代码进行压缩体积用的，在webpack4.0中， 默认的配置是进行压缩，可以通过 mode 模式的 development 来设置成不进行压缩，默认模式是production

其他的默认配置可以参考：
uglifyjs-webpack-plugin

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  //...
  optimization: {
    minimizer: [
      new UglifyJsPlugin()
    ]
  }
}
7.2 DefinePlugin

DefinePlugin 是 webpack 内置的插件，可以使用 webpack.DefinePlugin 直接获取。
这个插件用于创建一些在编译时可以配置的全局常量，这些常量的值我们可以在 webpack 的配置中去指定，例如：

module.exports = {
  // ...
  plugins: [
    new webpack.DefinePlugin({
      PRODUCTION: JSON.stringify(true), // const PRODUCTION = true
      VERSION: JSON.stringify('5fa3b9'), // const VERSION = '5fa3b9'
      BROWSER_SUPPORTS_HTML5: true, // const BROWSER_SUPPORTS_HTML5 = 'true'
      TWO: '1+1', // const TWO = 1 + 1,
      CONSTANTS: {
        APP_VERSION: JSON.stringify('1.1.2') // const CONSTANTS = { APP_VERSION: '1.1.2' }
      }
    }),
  ],
}...

有了上面的配置，就可以在应用代码文件中，访问配置好的变量了，如：

console.log("Running App version " + VERSION);

if(!BROWSER_SUPPORTS_HTML5) require("html5shiv");
7.3 copy-webpack-plugin

这个插件看名字就知道它有什么作用，没错，就是用来复制文件的。

我们一般会把开发的所有源码和资源文件放在 src/ 目录下，构建的时候产出一个 build/ 目录，通常会直接拿 build 中的所有文件来发布。有些文件没经过 webpack 处理，但是我们希望它们也能出现在 build 目录下，这时就可以使用 CopyWebpackPlugin 来处理了。

我们来看下如何配置这个插件：...

const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  // ...
  plugins: [
    new CopyWebpackPlugin([
      { from: 'src/file.txt', to: 'build/file.txt', }, // 顾名思义，from 配置来源，to 配置目标路径
      { from: 'src/*.ico', to: 'build/*.ico' }, // 配置项可以使用 glob
      // 可以配置很多项复制规则
    ]),
  ],
}...
7.4 extract-text-webpack-plugin

extract-text-webpack-plugin 是在webpack4.0 之前用来把 依赖的css 分离出来成为单独的文件，可以让脚本文件变得更小，
webpack 4.0 不再使用extra-text-webpack-plugin来分离css 转而使用mini-css-extract-plugin

7.5 mini-css-extract-plugin

mini-css-extract-plugin 既需要配置plugin 也需要配置loader

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    plugins: [
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: "[name].[contenthash].css",
            chunkFilename: "[id].css"
        })
    ],
    module: {
        rules: [{
            test: /\.(css|scss)$/,
            include: [path.resolve(__dirname, '../src')],
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader'
            ]
        }, ]
    }
}

tips: 这个插件一般在生产环境中使用，并且使用时不能使用style-loader==
ps: contenthash 和 hash 的区别 见第八部分

7.5 IgnorePlugin

IgnorePlugin 和 ProvidePlugin 一样，也是一个 webpack 内置的插件，可以直接使用 webpack.IgnorePlugin 来获取。

这个插件用于忽略某些特定的模块，让 webpack 不把这些指定的模块打包进去。例如我们使用 moment.js，直接引用后，里边有大量的 i18n 的代码，导致最后打包出来的文件比较大，而实际场景并不需要这些 i18n 的代码，这时我们可以使用 IgnorePlugin 来忽略掉这些代码文件，配置如下：...

module.exports = {
  // ...
  plugins: [
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
  ]
}

IgnorePlugin 配置的参数有两个，第一个是匹配引入模块路径的正则表达式，第二个是匹配模块的对应上下文，即所在目录名。

8 分离代码文件

为了实现减小打包后代码的体积，利用缓存来加速静态资源访问，需要将不同，且相互不影响的代码块分离出来， 在plugin 中介绍过mini-css-extract-plugin 来对css 文件进行分离， 除此之外， 还建议 公共使用的第三方类库显式地配置为公共的部分，因为第三方库在实际开发中，改变的频率比较小，可以避免因公共 chunk 的频繁变更而导致缓存失效。

module.exports = {
  entry: {
    vendor: ["react", "lodash", "angular", ...], // 指定公共使用的第三方类库
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: "initial",
          test: "vendor",
          name: "vendor", // 使用 vendor 入口作为公共部分
          enforce: true,
        },
      },
    },
  },
  // ... 其他配置
}

// 或者
module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /react|angluar|lodash/, // 直接使用 test 来做路径匹配
          chunks: "initial",
          name: "vendor",
          enforce: true,
        },
      },
    },
  },
}

// 或者
module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: "initial",
          test: path.resolve(__dirname, "node_modules") // 路径在 node_modules 目录下的都作为公共部分
          name: "vendor", // 使用 vendor 入口作为公共部分
          enforce: true,
        },
      },
    },
  },
}...

ps： 在次基础上， 需要在配置的output 中设置 chunkFilename 来配置打包后这些第三方库的名字

module.exports = {
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'bundle.[hash].js',
        chunkFilename: 'vendor.[chunkhash].js'
    },
}

ps: hash 和 chunkhash, contenthash 的区别==

  • hash 在每次构建的时候都会重新全部生成 ，所有的文件的hash 都是同一个值， 无论是否修改了文件，所有的文件都将重新生成， 起不到缓存的效果； chunkhash根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值,比如我们将一些公共模块，或者第三方依赖包独立开来，接着用chunkhash 生成哈希值，只要不改变公共代码，就不需要重新构建；
    然而当chunkhash 用在css 中时， 由于css 和js 用了同一个chunkhash，所以当只改变js 时，css 文件也会重新生成， 所以css 中我们使用contenthash==

9 其他一些常用配置

resolve

resolve.alias

配置常用模块的相对路径

module.exports = {
  //...
  resolve: {
    alias: {
      Util: path.resolve(__dirname, 'src/util/'),
    }
  }
};

实际引用中
imoprt uitl from 'Util/sss'
原始：
import util from './src/util/sss'
resolve.extensions

这个配置可以定义在进行模块路径解析时，webpack 会尝试帮你补全那些后缀名来进行查找

resolve: {
    extensions: [".js", ".vue"],
  },
ahilll
关注
webpack4.0配置
01-08
webpack4.0基本配置模版，可以根据实际情况升级自己的webpack
从基础到实战 手把手带你掌握新版Webpack4.0源码及解析
最新发布
02-13
新版本下的 Webpack 4 知识体系，通过 基础 + 实例 + 原理代码编写 + 复杂案例分析 完成Webpack4的分析与讲解。更重要的是让你对整个前端项目的构建有一个全局化的认识，实现能力思想双升级。
浅谈webpack4.0 性能优化
weixin_33860722的博客
11-21 682
前言：在现实项目中，我们可能很少需要从头开始去配置一个webpack 项目，特别是webpack4.0发布以后，零配置启动一个项目成为一种标配。正因为零配置的webpack对项目本身提供的“打包”和“压缩”功能已经做了优化，所以实际应用中，我们可以把精力更多专注在业务层面上，而无需分心于项目构建上的优化。然而从学习者的角度，我们需要了解w...
学习笔记(01):从基础到实战 手把手带你掌握新版Webpack4.0-什么是模块打包工具？...
aa1ss2dd3asd的博客
05-19 340
从基础到实战 手把手带你掌握新版Webpack4.0Webpack 目前无论在求职还是工作中，使用越来越普及。而想要学懂，学会Webpack更绝非易事。本课程完整讲清最新版本下的 Webpack 4 知识体系，通过 基础 + 实例 + 原理代码编写 + 复杂案例分析 完成Webpack4的分析与讲解。更重要的是让你对整个前端项目的构建有一个全局化的认识，实现能力思想双升级。 ...
webpack4.0学习笔记
weixin_33893473的博客
02-15 507
webpack基础 webpack基础配置 webpack打包出的文件解析 Html插件 样式处理 转化es6语法 处理js语法及校验 全局变量引入问题 图片处理 打包文件分类 webpack配置 打包多页应用 配置source-map watch的用法 webpack小插件应用 webpack跨域问题 resolve属性的配置 定义环境...
webpack4.0打包优化策略整理小结
08-27
Webpack 4.0 打包优化策略整理小结 Webpack 4.0 打包优化策略整理小结主要介绍了webpack 4.0 打包优化策略整理小结，以下是小编整理的优化策略。 loader 配置优化 在webpack 4.0 中，可以通过缩小文件匹配范围...
webpack4.0基础
weixin_30485799的博客
05-30 157
安装 yarn add webpack webpack-cli -D npx webpack index.js 图片 　　file-loader module: { rules: [ { test: /\.(jpg|png|gif)$/, use: { loader: 'file-l...
webpack视频教程及源码百度云盘下载地址
08-12
webpack
jsp从基础到实战
04-09
jsp从基础到实战。一本不错的书，可以看看。
02 webpack4.0学习笔记——安装、基本命令
X北辰北的博客
06-12 581
概述 本文主要介绍webpack的安装以及基本使用。具体的操作过程如下。 具体操作步骤 1、webpack安装（已经安装node环境,并且版本大于8.9.4） 打开命令行窗口，通过输入命令“npm install webpack-cli -g”来全局安装webpack，如图： 2、webpack简单使用 2.1 由上我们得知，w...
手把手Fiddler掌握
weixin_34032792的博客
08-09 100
手把手Fiddler掌握 目录 概述 功能 工具条使用 状态栏使用 监控面板使用 HTTPS捕获设置 实际运用 HOSTS设置 文件代理 伪造请求 模拟网络请求延迟 插件 结语 概述 Fiddler是一款HTTP协议调试代理工具，它能够抓取记录本机所有HTTP(S)请求，通过设置断点等方法我们可以任意修改进出Fiddler的数据（cookie,html,js,css）完成测试...
从基础到实战 手把手带你掌握新版Webpack4.0完整
zzz1048506792的博客
10-11 1703
2-1 webpack究竟是什么 一. 1.面向过程的程序和面向对象的程序 面向过程的程序相当于一大长串的代码，会造成文件越来越大，不利于维护 面向对象是把一个部分封装到一个类中，当某个东西出现问题时，可以方便的去寻找这个类 2.import 引入js文件 浏览器并不认识import，需要通过webpack来解析一下 3.安装webpack npm init npm install webpack...
Webpack4.0基础教程四：plugins(插件)
YaoDeBiAn的博客
12-04 895
loader被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。   想要使用一个插件，你只需要require()它，然后把它添加到plugins数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用n...
Webpack4.0基础教程五：suorce map
YaoDeBiAn的博客
12-04 455
当 webpack 打包源代码时，可能会很难追踪到错误和警告在源代码中的原始位置。例如，如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会简单地指向到 bundle.js。这并通常没有太多帮助，因为你可能需要准确地知道错误来自于哪个源文件。 为了更容易地追踪错误和警告，JavaScript 提供了...
从基础到实战 手把手带你掌握新版Webpack
03-23
从基础到实战 手把手带你掌握新版WebpackWebpack 目前无论在求职还是工作中，使用越来越普及。而想要学懂，学会Webpack更绝非易事。本课程完整讲清最新版本下的 Webpack知识体系，通过 基础 + 实例 + 原理代码编写 + 复杂案例分析 完成Webpack的分析与讲解。更重要的是让你对整个前端项目的构建有一个全局化的认识，实现能力思想双升级。
Webpack4.0源码解析与实战应用教程
资源摘要信息: "《从基础到实战 手把手带你掌握新版Webpack4.0源码及解析》是一本专注于最新版Webpack 4.0的教材，旨在帮助读者从基础概念出发，通过实例演示、原理代码编写和复杂案例分析的方式，全面深入地理解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值