webpack4.0学习笔记（一）

最新推荐文章于 2022-12-01 14:49:13 发布
最新推荐文章于 2022-12-01 14:49:13 发布
阅读量242 收藏 1
点赞数 1
分类专栏： 工程化 文章标签： webpack4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guo187/article/details/104780930
版权

介绍

webpack是一种前端资源构建工具，一个静态模块打包器。
在webpack看来，前端所有的资源文件都会作为模块处理。它会根据模块的依赖关系进行静态分析，打包生成对应的静态资源。

五个核心概念

  1. Entry ：入口文件，以入口为起点开始打包，分析构建内部依赖图。
  2. Output ：出口，打包后的资源输出位置及命名。
  3. Loader ： 使得webpack处理非JS文件
  4. Plugins: 用于执行更广的任务。
  5. Mode ：development & production

初始化项目

1、全局安装webpack、webpack-cli

npm install webpack webpack-cli -g

2、创建项目文件夹webpack-note。
然后初始化项目，局部安装webpack、webpack-cli

npm  init 
npm install webpack webpack-cli -D

3、根目录下创建src文件夹下创建js文件夹，创建index.js文件
内容如下：

let add = (a,b)=> {
    return a+b;
}

add(3,4)

执行命令：webpack src/js/index.js -o build/js/bundles.js --mode=development

在这里插入图片描述
webpack src/js/index.js -o build/js/bundles.js --mode=production命令打包后会压缩文件。

开发环境基本配置

1、创建配置文件
根目录下新建webpack.config.js文件
内容如下：

const { resolve } = require('path');//node内置模块 用来处理路径问题

module.exports = {
    entry:'./src/js/index.js',
    output:{
        filename:'./build.js',//输出文件名
        path:resolve(__dirname,'build/js') //输出文件路径
    },
    mode:'development'//开发环境
}

运行webpack命令。
在这里插入图片描述
2、样式文件的打包
安装需要的loader

npm install css-loader style-loader less-loader less -D

新建index.css,随便写的样式。
运行webpack
在这里插入图片描述
报错了 ！！ 这是因为webpack默认不认识css文件的，我们需要使用loader来处理。
修改webpack.config.js文件如下：

const { resolve } = require('path');//node内置模块 用来处理路径问题

module.exports = {
    entry:'./src/js/index.js',
    output:{
        filename:'./build.js',//输出文件名
        path:resolve(__dirname,'build/js') //输出文件路径
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    mode:'development'//开发环境
}

再运行webpack即可。
在这里插入图片描述
对于less文件做同样处理。

源码 分支是dev_css
3、HTML资源的打包
下载html-webpack-plugin

npm install html-webpack-plugin -D

新建一个HTML文件 ，内容随意。
修改配置文件

const { resolve } = require('path');//node内置模块 用来处理路径问题
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry:'./src/js/index.js',
    output:{
        filename:'./build.js',//输出文件名
        path:resolve(__dirname,'build/js') //输出文件路径
    },
    module:{
        rules:[
        ]
    },
    plugins:[
        // html-webpack-plugin 会默认创建一个空的HTML，自动引入打包输出的所有资源
        new HtmlWebpackPlugin({
            // 复制./src/js/index.html 文件
            template:'./src/js/index.html'
        })
    ],
    mode:'development'//开发环境
}

运行webpack
在这里插入图片描述
源码 分支是dev_html

4、打包图片资源
下载loader

npm install html-loader url-loader file-loader -D

配置文件修改如下：

const { resolve } = require('path');//node内置模块 用来处理路径问题
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry:'./src/js/index.js',
    output:{
        filename:'./build.js',//输出文件名
        path:resolve(__dirname,'build/js') //输出文件路径
    },
    module:{
        rules:[
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                // 默认处理不了HTML中img图片
                test:/\.(jpg|png|gif)$/,
                // 下载url-loader file-loader
                loader:'url-loader',
                options:{
                    // 图片小于8KB 会处理为base64
                    // 优点：减少请求数量
                    linmit:8*1024,
                    // url-loader 默认使用es6模块化解析，而html-loader引入图片是commonjs
                    //解析时会出问题：[Object Module]
                    // 关闭uri-loader 的es6模块化 使用commonjs解析
                    esModule:false,
                    // 给图片进行重命名
                    // [hash:10]取图片hash的前10位
                    // [ext] 文件原来的扩展名
                    name:'[hash:10].[ext]'
                }
            },{
                test:/\.html$/,
                loader:'html-loader'
            }
        ]
    },
    plugins:[
        // html-webpack-plugin 会默认创建一个空的HTML，自动引入打包输出的所有资源
        new HtmlWebpackPlugin({
            // 复制./src/js/index.html 文件
            template:'./src/js/index.html'
        })
    ],
    mode:'development'//开发环境
}

源码 分支是dev_img
5、其他资源的打包 （如字体图标）
配置：

const { resolve } = require('path');//node内置模块 用来处理路径问题
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'./build.js',//输出文件名
        path:resolve(__dirname,'build') //输出文件路径
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                // 默认处理不了HTML中img图片
                test:/\.(jpg|png|gif)$/,
                // 下载url-loader file-loader
                loader:'url-loader',
                options:{
                    // 图片小于8KB 会处理为base64
                    // 优点：减少请求数量
                    linmit:8*1024,
                    // url-loader 默认使用es6模块化解析，而html-loader引入图片是commonjs
                    //解析时会出问题：[Object Module]
                    // 关闭uri-loader 的es6模块化 使用commonjs解析
                    esModule:false,
                    // 给图片进行重命名
                    // [hash:10]取图片hash的前10位
                    // [ext] 文件原来的扩展名
                    name:'[hash:10].[ext]'
                }
            },
            {
                test:/\.html$/,
                loader:'html-loader'
            },
            {
                // 排除css less js html 文件
                exclude:/\.(css|js|less|html)$/,
                loader:'file-loader',
                options:{
                    name:'[hash:10].[ext]'
                }
            }
        ]
    },
    plugins:[
        // html-webpack-plugin 会默认创建一个空的HTML，自动引入打包输出的所有资源
        new HtmlWebpackPlugin({
            // 复制./src/js/index.html 文件
            template:'./src/index.html'
        })
    ],
    mode:'development'//开发环境
}

在这里插入图片描述

源码 分支是dev_other
6、使用webpack-dev-server
安装webpack-dev-server
配置

const { resolve } = require('path');//node内置模块 用来处理路径问题
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'./build.js',//输出文件名
        path:resolve(__dirname,'build') //输出文件路径
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                // 默认处理不了HTML中img图片
                test:/\.(jpg|png|gif)$/,
                // 下载url-loader file-loader
                loader:'url-loader',
                options:{
                    // 图片小于8KB 会处理为base64
                    // 优点：减少请求数量
                    linmit:8*1024,
                    // url-loader 默认使用es6模块化解析，而html-loader引入图片是commonjs
                    //解析时会出问题：[Object Module]
                    // 关闭uri-loader 的es6模块化 使用commonjs解析
                    esModule:false,
                    // 给图片进行重命名
                    // [hash:10]取图片hash的前10位
                    // [ext] 文件原来的扩展名
                    name:'[hash:10].[ext]'
                }
            },
            {
                test:/\.html$/,
                loader:'html-loader'
            },
            {
                // 排除css less js html 文件
                exclude:/\.(css|js|less|html)$/,
                loader:'file-loader',
                options:{
                    name:'[hash:10].[ext]'
                }
            }
        ]
    },
    plugins:[
        // html-webpack-plugin 会默认创建一个空的HTML，自动引入打包输出的所有资源
        new HtmlWebpackPlugin({
            // 复制./src/js/index.html 文件
            template:'./src/index.html'
        })
    ],
    mode:'development',//开发环境
    devServer:{
        //项目构建后的路径
        contentBase:resolve(__dirname,'build'),
        // 启动gzip压缩
        compress:true,
        port:3000,//端口号
        open:true//自动打开浏览器
    }
}

npx webpack-dev-server 启动
在这里插入图片描述
源码 分支是dev_devserver

生产环境基本配置

1、提取css为单独文件
下载插件

npm install mini-css-extract-plugin -D

配置文件修改

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
   
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    // 'style-loader',
                    //取代 style-loader' 作用是提取JS中的css成单独文件
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
           
           
          
        ]
    },
    plugins:[
     
        new MiniCssExtractPlugin({
            filename:'css/build.css'
        })
    ],
    mode:'development',//开发环境
   
}

运行webpack
在这里插入图片描述
2、CSS兼容性处理
下载loader

npm install postcss-loader postcss-preset-env -D

配置文件修改

module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'./build.js',//输出文件名
        path:resolve(__dirname,'build') //输出文件路径
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    // 'style-loader',
                    //取代 style-loader' 作用是提取JS中的css成单独文件
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader:'postcss-loader',
                        options:{
                            ident:'postcss',
                            plugins:()=>{
                                require('postcss-preset-env')()
                            }
                        }
                    }
                ]
            }     
        ]
    },
  
    mode:'development',//开发环境
   
}

package.json增加

"browserslist":{
    "development":[
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production":[
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }

运行webpack

3、压缩CSS
下载

npm install optimize-css-assets-webpack-plugin -D

配置文件修改


const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

module.exports = {
  
    plugins:[
      
        //压缩css
        new OptimizeCssAssetsWebpackPlugin()
    ],
    mode:'development',//开发环境
    devServer:{
   
}

运行webpack

4、JS语法检查
下载

npm install eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D

配置修改


module.exports = {
   
    module:{
        rules:[
           
            {
                // eslint eslint-loader
                test:/\.js$/,
                exclude:/node_modules/,
                loader:'eslint-loader',
                options:{
                    // 自动修复eslint的错误
                    fix:true
                }
            }
        ]
    },
  
}

package.json增加如下

"eslintConfig":{
    "extends":"airbnb-base",
    "env":{
      "browser":true
    }
  }

会自动修复eslint的错误

5、JS兼容性处理
下载

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

配置文件修改



module.exports = {
  
    module:{
        rules:[
        
            {
                test:/\.js$/,
                exclude:/node_modules/,
                loader:'babel-loader',
                options:{
                    presets:[
                        [
                            '@babel/preset-env',
                            {
                                // 按需加载
                                useBuiltIns:'usage',
                                // 指定core-js
                                corejs:{
                                    version:3
                                },
                                // 指定兼容性做到哪个版本浏览器
                                targets:{
                                    chrome:'60',
                                    firefox:'60',
                                    ie:'9',
                                    safari:'10'
                                }
                            }
                        ]
                    ]
                }
            },
            
        ]
    },
  
   
}

6、JS压缩

  mode:'production',

改为生产模式 webpack会自动开启JS压缩的功能。
7、HTML压缩

new HtmlWebpackPlugin({
            // 复制./src/js/index.html 文件
            template:'./src/index.html',
            // 压缩HTML
            minify:{
                // 移除空格
                collapseWhitespace:true,
                // 移除注释
                removeComments:true
            }
        }),

8、生产环境配置

const { resolve } = require('path');//node内置模块 用来处理路径问题
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 定义node环境变量
process.env.NODE_ENV = "production"

// 复用loader
const commonCSSLoader = [
    // 'style-loader',
    //取代 style-loader' 作用是提取JS中的css成单独文件
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
        loader:'postcss-loader',
        options:{
            ident:'postcss',
            plugins:()=>{
                require('postcss-preset-env')()
            }
        }
    }
]
module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'./build.js',//输出文件名
        path:resolve(__dirname,'build') //输出文件路径
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[...commonCSSLoader]
            },
            {
                test:/\.less$/,
                use:[...commonCSSLoader,'less-loader']
            },
            {
                // 默认处理不了HTML中img图片
                test:/\.(jpg|png|gif)$/,
                // 下载url-loader file-loader
                loader:'url-loader',
                options:{
                    // 图片小于8KB 会处理为base64
                    // 优点：减少请求数量
                    linmit:8*1024,
                    // url-loader 默认使用es6模块化解析，而html-loader引入图片是commonjs
                    //解析时会出问题：[Object Module]
                    // 关闭uri-loader 的es6模块化 使用commonjs解析
                    esModule:false,
                    // 给图片进行重命名
                    // [hash:10]取图片hash的前10位
                    // [ext] 文件原来的扩展名
                    name:'[hash:10].[ext]'
                }
            },
            {
                test:/\.html$/,
                loader:'html-loader'
            },
            {
                // eslint eslint-loader
                test:/\.js$/,
                exclude:/node_modules/,
                enforce:"pre",//优先执行
                loader:'eslint-loader',
                options:{
                    // 自动修复eslint的错误
                    fix:true
                }
            },
            {
                test:/\.js$/,
                exclude:/node_modules/,
                loader:'babel-loader',
                options:{
                    presets:[
                        [
                            '@babel/preset-env',
                            {
                                // 按需加载
                                useBuiltIns:'usage',
                                // 指定core-js
                                corejs:{
                                    version:3
                                },
                                // 指定兼容性做到 哪个版本浏览器
                                targets:{
                                    chrome:'60',
                                    firefox:'60',
                                    ie:'9',
                                    safari:'10'
                                }
                            }
                        ]
                    ]
                }
            },
            {
                // 排除css less js html 文件
                exclude:/\.(css|js|less|html)$/,
                loader:'file-loader',
                options:{
                    name:'[hash:10].[ext]'
                }
            }
        ]
    },
    plugins:[
        // html-webpack-plugin 会默认创建一个空的HTML，自动引入打包输出的所有资源
        new HtmlWebpackPlugin({
            // 复制./src/js/index.html 文件
            template:'./src/index.html',
            // 压缩HTML
            minify:{
                // 移除空格
                collapseWhitespace:true,
                // 移除注释
                removeComments:true
            }
        }),
        new MiniCssExtractPlugin({
            filename:'css/build.css'
        }),
        //压缩css
        new OptimizeCssAssetsWebpackPlugin()
    ],
    mode:'development',//开发环境
    devServer:{
        //项目构建后的路径
        contentBase:resolve(__dirname,'build'),
        // 启动gzip压缩
        compress:true,
        port:3000,//端口号
        open:true//自动打开浏览器
    }
}

源码 分支是pro_basic

柒月梦
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webPack生产环境基础配置
Ll1994693的博客
09-27 128
【代码】webPack生产环境基础配置。
Vue.js学习系列四——Webpack打包工具的使用（装修中……）
热门推荐
大灰狼的小绵羊哥哥的博客
02-07 1万+
这两周一直想写webpack的知识点，却发现webpack其实要说的很具体内容挺多的。而且稀土掘金上一搜webpack有好多人都有去写webpack的知识点，所以本文中不再去重复别人的东西了，就简单记录一下我对webpack的理解。并按照老规矩附上demo以及我收藏的几篇不错的webpack入门文章以供学习参考~ 一、什么是webpack 1. webpack是虾米？ web
webpack 4.0 入门学习,简单易上手
记录日常
07-16 610
虽然网上教材很多,万事开头难,找到一篇博文觉得适合我这样的新手。(官方api看不懂 ………) 总结： 刚开始一股脑,按教程一股脑安装,最后执行,发现各种报错,建议执行一步测试一下，不然错误都不知道怎么解决。 1.首先安装环境,建议局部安装, 2.我遇到一些错误,比如找不到 webpack ,就是有些东西没有安装,比如webpack ,webpack-cli 3.注意看报错信息,找出问题所...
Webpack4.0基础教程三：安装简单的loader解析
YaoDeBiAn的博客
12-04 586
webpack中，有一种操作就是在“.js”文件中引入非javascript资源，所以在将其打包的过程中，我们需要某些loader解析器对相关的资源进行解析。   首先我们先来看看引入css资源： 安装style-loader和css-loader两个loader:npm install --save-dev style-loader css-loader   webpack.confi...
关于css-loader(v6.7.2)源码解析
最新发布
qq_35094120的博客
12-01 409
css-loader主要调用postcss插件实现所需要的功能。
webpack4.0-:webpack 4.0 配置学习
04-28
webpack4.0 练习webpack只能操作js,其他不能操作的都必须转化，webpack是基于node来使用的。安装webpack首先包初始化 npm init,生成package.json安装node,版本>8webpack 除了正常安装webpack外，还需要安装webpack-...
webpack4.0配置
01-08
Webpack 4.0 是一个强大的模块打包工具，用于将JavaScript应用程序的多种资源（如JavaScript、CSS、图片等）转换和打包成可用于生产环境的静态资源。这个配置模版旨在提供一个基础，帮助开发者理解并根据自己的项目...
webpack4.0打包优化策略整理小结
08-27
Webpack 4.0 打包优化策略整理小结 Webpack 4.0 打包优化策略整理小结主要介绍了webpack 4.0 打包优化策略整理小结，以下是小编整理的优化策略。 loader 配置优化 在webpack 4.0 中，可以通过缩小文件匹配范围...
webpack学习笔记
09-26
webpack学习笔记，总结了实际开发过程中的实际问题，并进行了梳理，便于直接查找使用；同时也对于目前市面上的资源进行了借鉴，梳理成为可以简单查找，就可以找到对应的思路，便于使用，方面了自己，也节省了时间。
webpack4.0教案内容1
08-08
Webpack 4.0 教案内容1主要涵盖了前端开发中重要的构建工具Webpack的入门和深入学习。Webpack 是一个模块打包器，它能够处理JavaScript、CSS、图片等静态资源，将它们打包成符合生产环境部署的静态文件。随着前端...
webpack学习笔记（一）：先打它一个包！webpack --mode [production | development | none]
CowShield的博客
07-17 2414
参考教程：https://www.webpackjs.com 1.创建目录，初始化npm，安装webpack。   mkdir webpack-demo && cd webpack-demo npm init -y npm install webpack webpack-cli --save-dev *webpack 4以上版本要求安装webpack-cli 2.创建一...
webpack从初识到熟练掌握的知识总结
qq_46312220的博客
08-16 466
webpack总结 1. webpack简介 1.1webpack是什么 webpack是一种前端资源构建工具，一个静态模块打包器。在webpack看来前端的所有资源文件（js/json/css/img/less/…）都会被当作模块处理，它奖根据模块的依赖关系进行静态分析，打包生成对应的静态资源。 1.2webpack的5个核心概念 1. Entry:入口，指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图，可以设置多个入口 2. Output:输出（output）指示webpack打包后的
webpack loader css,Webpack Loader源码导读之css-loader
weixin_32767301的博客
08-03 521
本篇是Webpack Loader源码导读系列中关于css-loader的解读，主要阐述loader的工作，及部份配置项作用。源码结构lib|____compile-exports.js|____createResolver.js|____css-base.js|____getImportPrefix.js|____getLocalIdent.js|____loader.js|____locals...
webpack4.x中关于css-loader的几个坑
讨厌走开啦
11-13 1万+
本文主要记录笔者在webpack4.x项目下使用css-loader管理css踩到的坑（下面用一个逐步修改的示例来说明）。 项目的初始诉求是使用webpack来托管css的合并。 当前项目代码结构如下图： package.json代码： { "name": "webpack4-css-loader", &am
【踩坑】Safari不兼容webpack封装的vue项目
weixin_30711917的博客
03-19 953
刚完成 Iblog 博客项目，在 chrome 浏览器调试完后，用 Safari 打开网站，页面一直停留在加载状态。 后来网上说这是 Safari 不支持 ES6 所致。 经过搜索，在 github 上有人遇到并解决了这个问题： vue-router + webpack dose work on Safari 引入 babel-polyfill 和 whatwg-fetch...
解决create-react-app创建的项目在IE浏览器空白兼容性问题（支持IE11、IE10、IE9）
jsyxiaoba的博客
11-14 3091
通过create-react-app创建的项目在IE浏览器空白一片，今天来说说解决方案，支持ie9–ie11。 支持IE11的操作 1.检查node_module里面有没有 ‘react-app-polyfill’ 模块，如果没有，通过命令 npm install react-app-polyfill --save 安装。 2.如果有此模块，接下来需要进行修改配置文件 package.json "...
Webpack4.0初体验
liwusen的博客
03-02 9662
简要介绍：Webpack4.0.1版本已经发布了2周了，下面用体验一下Webpack4.0 1 .安装Webpack4.0 （1） Node.js 4 is no longer supported. Source Code was upgraded to a higher ecmascript version 明确不支持node.js4.X，在本文中使用的是： node -v v...
webpack代理配置打包后接口404_JavaScript之webpack打包
weixin_39775106的博客
12-12 1152
webpack是一个静态模块打包工具，使用webpack处理项目时，它会递地构建一个依赖关系图（dependency graph），其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个bundle打包原理：识别入口文件逐层识别模块依赖（Commonjs、AMD或者ES6的import，webpack都会对其分析，从而获取代码的依赖）webpack分析代码-->转换代码-->编...
less loader 打包后样式丢失_webpack实战——预处理器(loader)【下篇】
weixin_34354231的博客
12-03 438
写在前面这是webpack实战系列笔记的第6篇记录，前几篇记录如下：打包第一个应用模块化与模块打包资源输入与输出一切皆模块预处理器【上篇】在上一篇中根据一切皆模块的思想，学习了解了loader：概述、引入、配置及使用。本篇接着上篇的话题，讲述常用loader。在我们项目开发中，尤其是目前流行的单页面应用，一些新手经常会在loader配置中有一些疑问，比如：对于xx资源应该使用哪个load...
webpack4.0搭建单页/多页脚手架：JQuery, React, Vue, TypeScript
总结来说，本文提供了一种使用webpack 4.0构建包含jQuery、React、Vue和TypeScript的单页和多页应用的详细指南，涵盖了从环境配置到项目构建的完整过程，是学习和实践webpack配置的良好参考资料。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值