webpack入门（1）

最新推荐文章于 2023-05-16 10:35:21 发布
最新推荐文章于 2023-05-16 10:35:21 发布
阅读量202 收藏
点赞数
文章标签： webpack json xhtml ViewUI
原文链接：http://www.cnblogs.com/sakurayeah/p/7837314.html
版权

webpack入门（1）

源码戳这里
ps：每个案例对应相应的demo，例如“案例1”对应“demo1”

一、webpack基本功能及简单案例

  • 安装webpack
    $ npm i webpack -g

  • 基本功能
    $ webpack -v 查看webpack版本号
    $ webpack 最基本的启动webpack的方法
    $ webpack -w 提供watch方法；实时进行打包更新
    $ webpack -p 对打包后的文件进行压缩
    $ webpack -d 提供source map，方便调式代码
    $ webpack --display-error-details 显示更多报错信息
    $ webpack --config webpack.config2.js 使用另一份配置文件webpack.config2.js来打包
    $ webpack --progress 显示进度条
    $ webpack --color 添加颜色



案例1

构建项目文件夹, 目录如下

[webpack]
  |-- src
    |-- index.js
    |-- index.less
    |-- index.html
  |-- package.json
  |-- webpack.config.js

webpack/src/index.html 内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

</body>
<script src='../build/app.js'></script>
</html>

webpack/src/index.less 内容如下

body {
  background: yellow;
}

webpack/src/index.js 内容如下

console.log(123)

运行 $ npm init , 入下图所示

2

然后就看到webpack/package.json文件的内容, 如下

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

配置 webpack.config.js

webpack/webpack.config.js 文件的内容,如下

var webpack = require('webpack');
module.exports = {
  entry: './src/index.js', // 入口文件地址
  output: {
    filename: './build/app.js' // 输出文件地址和名字
  },
  module: {
    loaders: [
      {
        test: /\.js$/,  // js-loader
        loader: 'babel-loader?presets=es2015'
      },
      {
        test: /\.css$/, // css-loader
        loader: "style-loader!css-loader"
      },
      {
        test: /\.less/, // less-loader
        loaders: 'style-loader!css-loader!less-loader'
      }
    ],
  }
}

分析如下图

5

安装依赖

  • 安装webpack依赖
    $ npm i webpack --save-dev
    $ npm i webpack@x.x.x --save-dev(安装指定版本的webpack)

  • 安装css依赖
    $ npm i css-loader --save-dev
    $ npm i style-loader --save-dev

  • 安装less依赖
    $ npm i less --save-dev
    $ npm i less-loader --save-dev

  • 安装es6依赖
    $ npm i babel-loader --save-dev
    $ npm i babel-preset-es2015 --save-dev
    $ npm i babel-core --save-dev

这个时候再看webpack/package.json文件，就会发现多了一部分内容，如下图所示

7

运行 $ webpack , 会发现项目文件夹下多了一个文件 webpack/build/app.js , 如下图所示

3

打开在浏览器打开 webpack/src/index.html ，会看到如下图所示

4

这样我们已经有了一个简单的案例，在入口文件index.js里引入相关的依赖，然后通过webpack把他们打包好，并生成到build/app.js文件里。在index.html里只需要引入app.js文件，就能够看到背景色和console.log打印的值。

如下图所示

6

webpack/package.json

{
    "name": "webpack",
    "version": "1.0.0",
    "description": "",
    "main": "webpack.config.js",
    "scripts": {
        "start": "webpack",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.2",
        "babel-preset-es2015": "^6.24.1",
        "css-loader": "^0.28.7",
        "less": "^2.7.3",
        "less-loader": "^4.0.5",
        "style-loader": "^0.19.0",
        "webpack": "^3.8.1"
    }
}

将webpack/build文件夹删除，运行$ npm run start，也能生成webpack/build/app.js



二、简单介绍下package.json中的devDependencies的版本号

  • 以devDependencies中，webapck的版本号为例

    devDependencies的版本号写法安装依赖的版本
    "webpack": "3.8.1"等于3.8.1
    "webpack": "~3.8.1"3.8.x，不会安装3.9.x或者3.7.x
    "webpack": "^3.8.1"3.x.x，不会安装4.x.x或者2.x.x
    "webpack": ">3.8.1"大于3.8.1
    "webpack": ">=3.8.1"大于等于3.8.1
    "webpack": "<=3.8.1"小于等于3.8.1



三、 webpack-dev-server

轻量级的服务器，可以修改代码后，在页面上看到修改完的效果，详细介绍戳这里

安装依赖
$ npm i webpack-dev-server -g
$ npm i webpack-dev-server --save-dev



案例2

ps:每个案例都是基于前一个案例的内容改造，没有提到的文件和前一个案例内容一样

运行 $ webpack-dev-server , 如下图
8

在浏览器打开连接 http://localhost:8080/src/ ，就能看到案例一的效果了

webpack/src/index.js

import './index.less';
const fn = () => {
  document.write('hi!')
}
fn();

这个时候在页面能够实时更新，如下图所示

9

改造 webpack/package.json

webpack/package.json

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.7",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "style-loader": "^0.19.0",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.3"
  }
}

10

可选的参数

  • --content-base: 设定webpack-dev-server的director根目录。如果不进行设定的话，默认是在当前目录下。
  • --quiet: 控制台中不输出打包的信息，开发中一般设置为false，进行 打印，这样查看错误比较方面
  • --no-info: 不显示任何信息
  • --colors: 对信息进行颜色输出
  • --no-colors: 对信息不进行颜色输出
  • --compress: 开启gzip压缩
  • --host : 设置ip
  • --port : 设置端口号，默认是:8080
  • --inline: webpack-dev-server会在你的webpack.config.js的入口配置文件中再添加一个入口,
  • --hot: 开发热替换
  • --open: 启动命令，自动打开浏览器
  • --history-api-fallback: 查看历史url
  • 更多参数戳这里

下面以“--port”举例

webpack/package.json

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack-dev-server --port 7777",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.7",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "style-loader": "^0.19.0",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.3"
  }
}

11

运行 $ npm run start

12

浏览器打开页面 http://localhost:7777/src/ ，即可看效果

webpack-dev-server后写多个参数：webpack-dev-server --hot --inline



四、output和entry

entry：入口文件，简单说就是要打包的文件。

output: 出口文件，简单说就是打包生成的文件。

entry有三种类型的值：字符串、数组、对象。案例一和案例二都是字符串的方式，下面来看下数组（案例三）和对象（案例四）的写法



案例3 --- entry值为数组的写法，多个入口对一个出口

新增文件 webpack/src/main.js，如下图

14

webpack/src/main.js

console.log('123')

webpack/webpack.config.js

var webpack = require('webpack');
module.exports = {
  entry: ['./src/index.js', './src/main.js'], // 入口文件地址
  output: {
    filename: './build/app.js' // 输出文件地址和名字
  },
  module: {
    loaders: [
      {
        test: /\.js$/,  // js-loader
        loader: 'babel-loader?presets=es2015'
      },
      {
        test: /\.css$/, // css-loader
        loader: "style-loader!css-loader"
      },
      {
        test: /\.less/, // less-loader
        loaders: 'style-loader!css-loader!less-loader'
      }
    ],
  }
}

运行 $ npm run build，index.js和main.js两个文件最后生成一个webpack/build/app.js文件

运行 $ npm run start，打开 http://localhost:7777/src/ ，可以看到两个文件里的代码都生效了，如下图所示

15



案例4 --- entry值为对象的写法，多个入口对多个出口

webpack/webpack.config.js

var webpack = require('webpack');
module.exports = {
  entry: { // 入口文件地址
    app: './src/index.js',
    main: './src/main.js'
  },
  output: { // 输出文件地址和名字
    filename: './build/[name].js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,  // js-loader
        loader: 'babel-loader?presets=es2015'
      },
      {
        test: /\.css$/, // css-loader
        loader: "style-loader!css-loader"
      },
      {
        test: /\.less/, // less-loader
        loaders: 'style-loader!css-loader!less-loader'
      }
    ],
  }
}

webpack/src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

</body>
<script src='../build/app.js'></script>
<script src='../build/main.js'></script>
</html>

运行 $ npm run build，会生成webpack/build/app.js和webpack/build/main.js

13

将main.js也在index.html里引入一下，就能看见和案例三一样的效果



案例5 --- output的path和publicPath

webpack/package.json

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack-dev-server --content-base --inline --hot --port 7777",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.7",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "style-loader": "^0.19.0",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.3"
  }
}

webpack-dev-server的配置参数，可以去 案例2 的 可选的参数 里去找

webpack/webpack.config.js

var webpack = require('webpack');
module.exports = {
  entry: { // 入口文件地址
    app: './src/index.js',
    main: './src/main.js'
  },
  output: { // 出口文件
    path: __dirname + "/build", // 打包后的文件存放路径
    filename: '[name].js', // 文件名，name即为entry的key
    publicPath: '/build' // 命令行模式下,一定要配置output.publicPath来指定编译后的包(bundle)的访问位置
  },
  module: {
    loaders: [
      {
        test: /\.js$/,  // js-loader
        loader: 'babel-loader?presets=es2015'
      },
      {
        test: /\.css$/, // css-loader
        loader: "style-loader!css-loader"
      },
      {
        test: /\.less/, // less-loader
        loaders: 'style-loader!css-loader!less-loader'
      }
    ],
  }
}

__dirname：是一个全局变量，指当前执行脚本所在的目录

path和publicPath的区别：戳这里

运行 $ npm run build 和 $ npm run start (打开 http://localhost:7777/src/ ) 的效果和案例四一样

[name]不一定一定要是文件名，也可以是路径：
filename: '[name]/min.js'
可以自己运行下 $ webpack ， 看下生成的文件，这里就不贴图展示了

output里filename有三个值：
· [name]是文件名字是entry的键值。
· [hash]是md5加密的值。
· [chunkhash]可以作为版本号使用。



五、html单独打包

安装依赖
$ npm install html-webpack-plugin --save-dev

可选的配置：

  • title : 用于生成的HTML文件的标题。
  • filename : 用于生成的HTML文件的名称，默认是index.html。也可以指定打包的目录，下面案例7中有介绍。
  • template : 模板的路径。支持加载器，例如 html!./index.html。模板类型可以是html，jade，ejs，hbs等，注意要安装对应的loader
  • inject : 注入选项，有四个值
    • true(默认，script标签位于html文件的 body 底部)
    • ‘head’（script 标签位于 head 标签内）
    • ‘body’（同 true）
    • false（不插入生成的 js 文件，只是单纯的生成一个 html 文件
  • favicon : 给定的图标路径，可将其添加到输出html中。
  • minify : 值为对象或者false，对 html 文件进行压缩，false是默认选项，不压缩。html-minifier详细文档戳这里。
  • hash : true | false。如果是true，会给所有包含的script和css添加一个唯一的webpack编译hash值，类似于我们常用的时间戳。这对于缓存清除非常有用。
  • cache : true(默认) | false 。是否需要缓存，如果传入true，只有在文件变化时才发送（emit）文件。
  • showErrors : true | false 。如果传入true（默认），错误信息将写入html页面。
  • chunks : 主要是针对多入口(entry)文件，默认会在生成的 html 文件中引用所有的 js 文件，也可以指定引入哪些js。
  • excludeChunks : 和chunks刚好相反，指定不需要引入的js。
  • chunksSortMode : 决定了 script 标签的引用顺序。有四个值
    • ‘auto’，默认，内置的排序方式
    • ‘none’，不排序
    • ‘dependency’，按照不同文件的依赖关系来排序
    • {function}，可以指定具体排序规则
  • xhtml : 布尔值
    • false，默认
    • true，兼容 xhtml 的模式引用文件



案例6 --- html-webpack-plugin的基本用法

webpack/package.json

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack-dev-server --content-base build --inline --hot --port 7777 ",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.7",
    "html-webpack-plugin": "^2.30.1",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "style-loader": "^0.19.0",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.3"
  }
}

webpack-dev-server --content-base
设定webpack-dev-server的director根目录。如果不进行设定的话，默认是在当前目录下。

webpack-dev-server --content-base build
将build目录作为根目录。有一点需要注意的是，webpack-dev-server生成的包并没有放在你的真实目录中，而是放在了内存中。

webpack/webpack.config.js

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

module.exports = {
  entry: { // 入口文件地址
    app: './src/index.js',
    main: './src/main.js'
  },
  output: { // 出口
    path: __dirname + "/build", // 打包后的文件存放路径
    filename: '[name].js' // 文件名，name即为entry的key
  },
  module: {
    loaders: [
      {
        test: /\.js$/,  // js-loader
        loader: 'babel-loader?presets=es2015'
      },
      {
        test: /\.css$/, // css-loader
        loader: "style-loader!css-loader"
      },
      {
        test: /\.less/, // less-loader
        loaders: 'style-loader!css-loader!less-loader'
      }
    ],
  },
  plugins: [new HtmlWebpackPlugin()]
}

16

运行 $ npm run build ，会发现html被单独打包出来了webpack/build/index.html，如下图所示

17

运行 $ npm run start，打开 http://localhost:7777/ ，就能看到效果。因为我们默认打包后生成的html名就是index(主页面文件)，所以这里相当于是打开了 http://localhost:7777/index.html



案例7 --- html-webpack-plugin的title和filename

webpack/webpack.config.js

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

module.exports = {
  entry: { // 入口文件地址
    app: './src/index.js',
    main: './src/main.js'
  },
  output: { // 出口
    path: __dirname + "/build", // 打包后的文件存放路径
    filename: '[name].js' // 文件名，name即为entry的key
  },
  module: {
    loaders: [
      {
        test: /\.js$/,  // js-loader
        loader: 'babel-loader?presets=es2015'
      },
      {
        test: /\.css$/, // css-loader
        loader: "style-loader!css-loader"
      },
      {
        test: /\.less/, // less-loader
        loaders: 'style-loader!css-loader!less-loader'
      }
    ],
  },
  plugins: [new HtmlWebpackPlugin({
      title: 'demo',
      filename: 'demo.html'
  })]
}

18

filename是设置打包好的html文件名，title是设置html的标题。

运行 $ npm run build， 会将html打包webpack/build/demo.html，且页面标题为demo，如下图所示

19

运行 $ npm run start，打开 http://localhost:7777/demo.html 看页面效果

filename其他写法：（下面介绍两种，大家自己试一下）

  • filename: './dist/demo.html'。 则html会被打包成webpack/build/dist/demo.html
  • filename: __dirname + '/dist/demo.html'。 则html会被打包到webpack/dist/demo.html



案例8 --- html-webpack-plugin的template和chunks，生成多个html

新建文件 webpack/src/main.html，如下图所示
20

webpack/src/main.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>main</title>
</head>
<body>

</body>
</html>

webpack/src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>index</title>
</head>
<body>

</body>
</html>

webpack/webpack.config.js

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

module.exports = {
  entry: { // 入口文件地址
    app: './src/index.js',
    main: './src/main.js'
  },
  output: { // 出口
    path: __dirname + "/build", // 打包后的文件存放路径
    filename: '[name].js' // 文件名，name即为entry的key
  },
  module: {
    loaders: [
      {
        test: /\.js$/,  // js-loader
        loader: 'babel-loader?presets=es2015'
      },
      {
        test: /\.css$/, // css-loader
        loader: "style-loader!css-loader"
      },
      {
        test: /\.less/, // less-loader
        loaders: 'style-loader!css-loader!less-loader'
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'demo.html', // 生成的的html文件名
      template: './src/index.html', // 被打包的html路径
      chunks: ['app'] // 需要引入的js
    }),
    new HtmlWebpackPlugin({
      filename: 'main.html',
      template: './src/main.html',
      chunks: ['main']
    })
  ]
}

运行 $ npm run build，生成的文件如下所示
21

webpack/src/index.html打包生成webpack/build/demo.html，并且引入的js是app.js。 webpack/src/main.html打包生成的是webpack/build/main.html，js引入的是main.js。

template：需要打包的html的文件路径
chunks：是一个数组，里面的值对应entry里的key，可以写多个，例如 chunks: ['app','main']

运行 $ npm run start, 分别打开 http://localhost:7777/main.html 和 http://localhost:7777/demo.html 可以看到页面效果



六、css单独打包

安装依赖 $ npm install extract-text-webpack-plugin --save-dev

new ExtractTextPlugin() 和 ExtractTextPlugin.extract() 详细介绍戳这里

  1. ExtractTextPlugin.extract()，有三个参数：
  • 第一个参数是可选参数，传入一个loader，当css样式没有被抽取的时候可以使用该loader；
  • 第二个参数则是用于编译解析的css文件loader，很明显这个是必须传入的，就像上述例子的css-loader；
  • 第三个参数是一些额外的备选项，貌似目前只有传入publicPath，用于当前loader的路径。
  1. new ExtractTextPlugin([id: string], filename: string, [options])
  • [id: string]：该插件实例的唯一标志，一般是不会传的，其自己会生成
  • filename: 文件名，包含[name]、[id]、[contenthash]
    • [name]：将会和entry中的chunk的名字一致
    • [id]：将会和entry中的chunk的id一致
    • [contenthash]：根据内容生成hash值
  • options
    • allchunk： 是否将所有额外的chunk都压缩成一个文件
    • disable：禁止使用插件



案例9

新建文件webpack/src/main.css

webpack/src/main.css

body {
  background: red;
}

webpack/src/main.js

import './main.css';
console.log('123')

webpack/webpack.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: { // 入口文件地址
    app: './src/index.js',
    main: './src/main.js'
  },
  output: { // 出口
    path: __dirname + "/build", // 打包后的文件存放路径
    filename: '[name].js' // 文件名，name即为entry的key
  },
  module: {
    loaders: [
      {
        test: /\.js$/,  // js-loader
        loader: 'babel-loader?presets=es2015'
      },
      {
        test: /\.css$/, // css-loader
        loader: ExtractTextPlugin.extract(['css-loader'])
      },
      {
        test: /\.less/, // less-loader
        loaders: ExtractTextPlugin.extract([ 'css-loader', 'less-loader' ])
      }
    ],
  },
  plugins: [
      new HtmlWebpackPlugin({
        filename: 'demo.html', // 生成的的html文件名
        template: './src/index.html', // 被打包的html路径
        chunks: ['app'] // 需要引入的js
      }),
      new HtmlWebpackPlugin({
        filename: 'main.html',
        template: './src/main.html',
        chunks: ['main']
      }),
      new ExtractTextPlugin("[name].css")
  ]
}

23

这里写了css和less两种文件的打包，并生成对应的名字

运行 $ npm run build，效果如下

22

在index.js里引入的index.less，最后生成的app.css，并且在index.html中引用了。在main.js里引入的main.css，打包后生成main.css，并且在main.html中引用。

运行 $ npm run start, 分别打开 http://localhost:7777/main.html 和 http://localhost:7777/demo.html 可以看到页面效果。

这个时候会发现，如果修改js页面还是会自动刷新，如果修改css或者less，页面需要手动刷新才会看到最新的效果



七、图片的处理

安装依赖
$ npm i url-loader --save-dev
$ npm i file-loader --save-dev



案例10

新增 webpack/src/images/Ahri.jpg
Ahri

新增 webpack/src/images/Minions.jpg
Minions

webpack/src/index.less

body {
  height: 500px;
  background: url('./images/Ahri.jpg') no-repeat center;
}

webpack/src/main.css

body {
  background: url('./images/Minions.jpg') no-repeat;
}

webpack/webpack.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: { // 入口文件地址
    app: './src/index.js',
    main: './src/main.js'
  },
  output: { // 出口
    path: __dirname + "/build", // 打包后的文件存放路径
    filename: '[name].js' // 文件名，name即为entry的key
  },
  module: {
    loaders: [
      {
        test: /\.js$/,  // js-loader
        loader: 'babel-loader?presets=es2015'
      },
      {
        test: /\.css$/, // css-loader
        loader: ExtractTextPlugin.extract(['css-loader'])
      },
      {
        test: /\.less/, // less-loader
        loaders: ExtractTextPlugin.extract([ 'css-loader', 'less-loader' ])
      },
      {
        test: /\.(png|jpg)$/, // img-loader
        loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'demo.html', // 生成的的html文件名
      template: './src/index.html', // 被打包的html路径
      chunks: ['app'] // 需要引入的js
    }),
    new HtmlWebpackPlugin({
      filename: 'main.html',
      template: './src/main.html',
      chunks: ['main']
    }),
    new ExtractTextPlugin({
      filename: '[name].css'
    })
  ]
}

运行 $ npm run start

打开 http://localhost:7777/demo.html ，效果如下

24

打开 http://localhost:7777/main.html ，效果如下

26

运行 $ npm run build，如下所示

27

分析如下

25

  1. 除了png和jpg外，还可以添加gif等，以“|”分隔。
  2. limit=8192，图片小于8192字节时以，转为base64引入，大于8192字节时，调用file-loader打包生成文件
  3. name=images/[hash:8].[name].[ext]，“ images/ ”指定图片打包到文件夹webpack/build/images，“ [hash:8] ”指8位 hash 值

可以自己尝试下这种打包出来的结果：

{
  test: /\.(png|jpg)$/, // img-loader
  loader: 'url-loader?limit=8192'
}

效果如下
28



八、引入jq

npm i jquery --save-dev



案例11

webpack/src/index.js

import './index.less';
import $ from 'jquery';
$('body').prepend('hehe');

这样运行 $ npm run build，jquery被打包到app.js里了



九、CommonsChunkPlugin 打包公共文件

new webpack.optimize.CommonsChunkPlugin({
  name: xx, // 对应entry的key
  filename: xx, // 输出的文件名，如果不写这个则以name为输出的文件名
  chunks: xx // 只有在这个文件中引入的模块才能被打包
  minChunks: xx, // 符合引用次数的则被打包
})



案例12 --- 单一入口，分文件输出

webpack/webpack.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: { // 入口文件地址
    app: './src/index.js',
    // main: './src/main.js'
  },
  output: { // 出口
    path: __dirname + "/build", // 打包后的文件存放路径
    filename: '[name].js' // 文件名，name即为entry的key
  },
  module: {
    loaders: [
      {
        test: /\.js$/,  // js-loader
        loader: 'babel-loader?presets=es2015'
      },
      {
        test: /\.css$/, // css-loader
        loader: ExtractTextPlugin.extract(['css-loader'])
      },
      {
        test: /\.less/, // less-loader
        loaders: ExtractTextPlugin.extract([ 'css-loader', 'less-loader' ])
      },
      {
        test: /\.(png|jpg)$/, // img-loader
        loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'demo.html', // 生成的的html文件名
      template: './src/index.html', // 被打包的html路径
      chunks: ['app', 'chunk'] // 需要引入的js
    }),
    // new HtmlWebpackPlugin({
    //   filename: 'main.html',
    //   template: './src/main.html',
    //   chunks: ['main']
    // }),
    new ExtractTextPlugin({
      filename: '[name].css'
    }),
    new webpack.optimize.CommonsChunkPlugin("chunk")
  ]
}

29

$ npm run build, 打包出来的结果如下：

30

这里注意，chunk.js一定要在app.js之前引入



案例13 --- 多入口，分文件输出，jquery单独打包

webpack/webpack.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: { // 入口文件地址
        app: './src/index.js',
        jquery: [ "jquery" ]
        // main: './src/main.js'
    },
    output: { // 出口
        path: __dirname + "/build", // 打包后的文件存放路径
        filename: '[name].js' // 文件名，name即为entry的key
    },
    module: {
        loaders: [
            {
                test: /\.js$/,  // js-loader
                loader: 'babel-loader?presets=es2015'
            },
            {
                test: /\.css$/, // css-loader
                loader: ExtractTextPlugin.extract(['css-loader'])
            },
            {
                test: /\.less/, // less-loader
                loaders: ExtractTextPlugin.extract([ 'css-loader', 'less-loader' ])
            },
            {
                test: /\.(png|jpg)$/, // img-loader
                loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
            }
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'demo.html', // 生成的的html文件名
            template: './src/index.html', // 被打包的html路径
            chunks: ['app', 'jquery'] // 需要引入的js
        }),
        // new HtmlWebpackPlugin({
        //     filename: 'main.html',
        //     template: './src/main.html',
        //     chunks: ['main']
        // }),
        new ExtractTextPlugin({
            filename: '[name].css'
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'jquery'
        })
    ]
}

31

运行 $ npm run build, 效果如下

32

通过webpack.optimize.CommonsChunkPlugin，将jquery单独打包到jquery.js中。如果不写这部分，app.js中也会被打包入jquery，大家可以自己尝试下。



案例14

webpack/webpack.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: { // 入口文件地址
    app: './src/index.js',
    main: './src/main.js',
    jquery: [ "jquery" ]
  },
  output: { // 出口
    path: __dirname + "/build", // 打包后的文件存放路径
    filename: '[name].js' // 文件名，name即为entry的key
  },
  module: {
    loaders: [
      {
        test: /\.js$/,  // js-loader
        loader: 'babel-loader?presets=es2015'
      },
      {
        test: /\.css$/, // css-loader
        loader: ExtractTextPlugin.extract(['css-loader'])
      },
      {
        test: /\.less/, // less-loader
        loaders: ExtractTextPlugin.extract([ 'css-loader', 'less-loader' ])
      },
      {
        test: /\.(png|jpg)$/, // img-loader
        loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
      }
    ],
  },
  plugins: [ // 插件
    new HtmlWebpackPlugin({
      filename: 'demo.html', // 生成的的html文件名
      template: './src/index.html', // 被打包的html路径
      chunks: ['app', 'jquery'] // 需要引入的js
    }),
    new HtmlWebpackPlugin({
      filename: 'main.html',
      template: './src/main.html',
      chunks: ['main']
    }),
    new ExtractTextPlugin({
      filename: '[name].css'
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'jquery',
      chunks: ['app'] // 在app.js中引用的才被打包
    })
  ]
}

$ npm run build, main.js和app.js中均为打包入jquery，jquery被单独打包，并且仅在demo.html中引用。



十、js压缩

这里介绍两种方式大家自己运行 $ npm run build 试试，对比下压缩前后的效果

  1. new webpack.optimize.UglifyJsPlugin()

webpack/webpack.config.js的plugins添加如下
javascript module.exports = { plugins: [ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ] }

  1. webpack -p

webpack/package.json的scripts修改如下
json "scripts": { "build": "webpack -p", },



十一、自动添加css前缀 postcss-loader

类似下面这种需要添加浏览器前缀等兼容的情况，每次自己写太麻烦，可以用postcss-loader帮助我们完成这些功能

display: -webkit-box;
display: -ms-flexbox;
display: flex;

这里综合上面所讲的内容，从头写一个新的demo（简单的留言板效果）, 效果如下
38

demo涉及到上面没有讲过的内容，如下：



案例15

新建项目文件夹 webpackDemo，文件目录如下

33

运行 $ npm init。

安装以下依赖 :
babel-core
babel-loader
babel-preset-es2015
css-loader
extract-text-webpack-plugin
file-loader
html-webpack-plugin
jquery
less
less-loader
style-loader
url-loader
webpack
webpack-dev-server

webpackDemo/src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>webpackDemo</title>
</head>
<body>
  <div class="wrapper"></div>
</body>
</html>

webpackDemo/src/css/reset.less

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
input, button {
  outline:none;
}

webpackDemo/src/css/index.less

@import 'reset.less';
.wrapper {
  margin: 50px auto;
  border: 1px solid #000;
  width: 400px;
  height: 500px;
  background: lightpink;
}

webpackDemo/src/index.js

import '../src/css/index.less';
import $ from 'jquery';
$('.wrapper').append('您好');

webpackDemo/package.json

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack-dev-server --content-base build --inline --hot",
    "build": "webpack -p",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^2.30.1",
    "jquery": "^3.2.1",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "style-loader": "^0.19.0",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.5"
  }
}

webpackDemo/webpack.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: { // 入口文件地址
    index: './src/index.js',
    vendor: [ "jquery" ]
  },
  output: { // 出口
    path: __dirname + "/build", // 打包后的文件存放路径
    filename: '[name].js' // 文件名，name即为entry的key
  },
  module: {
    loaders: [
      {
        test: /\.js$/,  // js-loader
        loader: 'babel-loader?presets=es2015'
      },
      {
        test: /\.css$/, // css-loader
        loader: ExtractTextPlugin.extract(['css-loader'])
      },
      {
        test: /\.less/, // less-loader
        loaders: ExtractTextPlugin.extract([ 'css-loader', 'less-loader' ])
      },
      {
        test: /\.(png|jpg)$/, // img-loader
        loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html', // 生成的的html文件名
      template: './src/index.html', // 被打包的html路径
      chunks: ['index', 'vendor'] // 需要引入的js，对应entry的key
    }),
    new ExtractTextPlugin({
      filename: '[name].css'
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor' // 对应entry的key
    })
  ]
}

运行 $ npm run start, 打开 http://localhost:8080/ ，效果如下：

34

下面写banner（输入框和发送按钮）部分，先写一个简单的js

新建 webpackDemo/src/js/banner.js

webpackDemo/src/js/banner.js

export default function ($wrapper) {
  $wrapper.append('banner');
}

webpackDemo/src/index.js

import '../src/css/index.less';
import $ from 'jquery';
import bannerRender from '../src/js/banner';

const $wrapper = $('.wrapper');

const init = () => {
  bannerRender($wrapper);
}

init();

效果如下：

35

下面写banner部分的html部分和css部分

安装依赖 $ npm i atpl-loader postcss-loader --save-dev

新建
webpackDemo/src/tpl/banner.atpl
webpackDemo/src/css/banner.less
webpackDemo/postcss.config.js

webpackDemo/postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

webpackDemo/webpack.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: { // 入口文件地址
    index: './src/index.js',
    vendor: [ "jquery" ]
  },
  output: { // 出口
    path: __dirname + "/build", // 打包后的文件存放路径
    filename: '[name].js' // 文件名，name即为entry的key
  },
  module: {
    loaders: [
      {
        test: /\.js$/,  // js-loader
        loader: 'babel-loader?presets=es2015'
      },
      {
        test: /\.css$/, // css-loader postcss-loader
        loader: ExtractTextPlugin.extract('css-loader!postcss-loader')
      },
      {
        test: /\.less/, // less-loader postcss-loader
        loaders: ExtractTextPlugin.extract('css-loader!less-loader!postcss-loader')
      },
      {
        test: /\.(png|jpg)$/, // img-loader
        loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
      },
      {
        test: /\.atpl?$/, // atpl
        loader: 'atpl-loader',
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html', // 生成的的html文件名
      template: './src/index.html', // 被打包的html路径
      chunks: ['index', 'vendor'] // 需要引入的js，对应entry的key
    }),
    new ExtractTextPlugin({
      filename: '[name].css'
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor' // 对应entry的key
    })
  ]
}

webpackDemo/src/tpl/banner.atpl

<div class="banner-wrap">
  <input class="ipt" placeholder="在这里输入留言内容" />
  <button class="btn">发送</button>
</div>

webpackDemo/src/css/banner.less

.banner-wrap {
  height: 50px;
  background: #fff;
  display: flex;
  .ipt {
    flex: 1;
    border: 0;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 16px;
  }
  .btn {
    border: 0;
    width: 50px;
    border-radius: 0;
    color: #fff;
    font-size: 16px;
    background: #666;
  }
}

webpackDemo/src/js/banner.js

import '../css/banner.less';
import bannerTpl from '../tpl/banner.atpl';

export default function ($wrapper) {
  $wrapper.append(bannerTpl({}));
}

运行 $ npm run start , 打开 http://localhost:8080/index.html , 效果如下

36

下面写留言区域的部分

新建
webpackDemo/src/tpl/message.atpl
webpackDemo/src/css/message.less
webpackDemo/src/js/message.js

webpackDemo/src/tpl/message.atpl 

<ul class="message-wrap">
  <li>大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！大家好！</li>
  <li>留言6666666</li>
  <li>留言555555</li>
  <li>留言44444444</li>
  <li>留言3333333</li>
  <li>留言222222222</li>
  <li>留言11111111</li>
</ul>

webpackDemo/src/css/message.less

.message-wrap {
  padding: 25px;
  height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  li {
    border-bottom: 1px dashed lightcoral;
    padding: 10px 0;
    line-height: 1.5;
  }
}

webpackDemo/src/js/message.js

import '../css/message.less';
import messageTpl from '../tpl/message.atpl';

export default function ($wrapper) {
  $wrapper.append(messageTpl({}));
}

webpackDemo/src/index.js

import '../src/css/index.less';
import $ from 'jquery';
import bannerRender from '../src/js/banner';
import messageRender from '../src/js/message';

const $wrapper = $('.wrapper');

const init = () => {
  bannerRender($wrapper); // 引入banner部分
  messageRender($wrapper); // 引入message部分
}

init();

运行 $ npm run start , 打开 http://localhost:8080/index.html , 效果如下

37

接下来写留言功能

webpackDemo/src/js/banner.js

import '../css/banner.less';
import bannerTpl from '../tpl/banner.atpl';

// html
const render = ($wrapper) => {
    $wrapper.append(bannerTpl({}));
}

// 事件
const bindEvents = ($wrapper) => {
    // 点击发送按钮发送输入框内容
    $wrapper.on('click', '.btn', () => {
        const $ipt = $wrapper.find('.ipt');
        const $messageWrap = $wrapper.find('.message-wrap');
        const val = $ipt.val();
        // 当input有内容的时候才允许发送
        if ($ipt.length && val.length) {
            $messageWrap.prepend(`<li>${val}</li>`);
            // 发送完后清空input的val
            $ipt.val('');
        }
    })
}

export default function ($wrapper) {
    render($wrapper);
    bindEvents($wrapper);
}

运行 $ npm run start , 打开 http://localhost:8080/index.html，就能看到如下效果了

38

转载于:https://www.cnblogs.com/sakurayeah/p/7837314.html

dmwdm9650
关注
webpack入门+react环境配置
12-10
《webpack入门+React环境配置详解》 在前端开发中，模块化管理和自动化打包工具的使用已经成为常态，而webpack正是这样一款强大的工具。本文旨在为React的开发环境搭建打下基础，帮助开发者理解webpack的基本概念和...
webpack入门教程
11-10
### webpack入门教程 #### 一、什么是webpack？ webpack 是现代 JavaScript 应用程序的一个模块打包器。它将多个模块和资源文件打包成一个或多个 bundle 文件，这些文件可以在浏览器环境中运行。通过 webpack，...
模板插件aTpl
weixin_34378045的博客
03-28 117
摘要： 　　前面给大家分享了一款js模板插件，后来经过完善推荐给大家。该插件支持ie5+，chrome等浏览器以及移动端浏览器，支持for和if语法，以及表达式。 项目地址：https://github.com/baixuexiyang/aTpl，欢迎fork或star   文档地址：http://baixuexiyang.github.io/aTpl/doc/  ...
webpack命令行
weixin_33898876的博客
06-16 571
前面的话 　　webpack提供了命令行接口（CLI），以便对构建过程进行配置和交互。这对于制定早期原型、轮廓、编写 npm 脚本 或者一些个人自定义需求很有用。本文将详细介绍webpack的命令行接口   常用配置 【--help】 　　列出命令行所有可用的配置选项 webpack --help webpack -h 【--config】 　　指定其它的配置文件。配置文...
webpack基本用法
涂涂
11-26 894
目录 1.webpack核心概念之entry 2.webpack核心用法之output 3.webpack核心概念之loaders 4.webpack核心之plugins 5.webpack核心概念之mode 6.解析es6 7.解析css,less和sass 8.解析图片和字体 9.webpack中的文件监听 10.webpack中的热更新及原理分析 11.文件指纹策略：c...
webpack入门（2）
dmwdm9650的博客
12-26 160
webpack入门（2） ps：每个案例都是基于前一个案例改造的 webpack入门（1） 戳这里 案例源码戳这里 十二、ProvidePlugin 自动加载模块 new webpack.ProvidePlugin() 上面的案例太复杂，下面再新建一个简单的项目来讲解 案例16 -- 全局引入jquery 新建一个项目，如下 [webpack] |-- src |...
Webpack 常用命令参数
来自风平浪静的明天
03-27 678
常用命令 说明 webpack --output 文件名 输出文件路径 webpack --config 文件名 用于指定其他配置文件（默认为webpack.config.js） webpack --mode 模式 打包模式production：生产模式（压缩）development：开发模式（非压缩） webpack --watch 监听文件变化并自动打包 webpack -p 压缩混淆脚本（相当于–mode production） webpack -d 生成map映射...
Webpack入门视频教程.txt
09-25
Webpack入门视频教程.txt 前端必备技能，助你快速掌握
webpack 入门
03-24
#### 四、Webpack入门步骤 1. **安装Webpack**： - 使用 npm 或 yarn 安装 webpack 和 webpack-cli。 - 初始化 node.js 项目，使用 `npm init` 创建 package.json 文件。 2. **配置Webpack**： - 创建 `webpack...
webpack 4.0 快速构建项目
奋斗的小绿萝
08-07 401
说起前端的自动化构建，除了grunt，gulp，目前最火的无疑就是webpack。webpack最大的优点在于它的模块化。在这里，将记录关于webpack4.0自动化构建项目的学习之路。 官网指南：https://www.webpackjs.com/guides/ 一、安装webpack 二、下载依赖 三、初始化项目 四、webpack.config.js配置项目 五、...
To install it, you can run: npm install --save babel-runtime/core-js/object/keys
weixin_45708563的博客
06-04 2681
不说什么了，直接上错误截图： 有学过vue的程序员遇到这样的错误是不是很崩溃呢，反正我是很崩溃了，我弄了整整半天，都解决不了这个问题，百度搜索都找不到类似的问题，难道大家都很厉害，都没遇到这样的错误吗，那么恭喜大家，没有像我这样遇到这种错误，其实英语学的好，能看懂他提示的错误还是挺好解决的，编译器里提示的错误是 ERROR Failed to compile with 1 errors
报错：To install it, you can run : npm install --save @api/***解决方法
最新发布
qq_34082921的博客
05-16 2万+
我最后解决的方法是，因为缺少这个文件，所以我当时拉取的已经是最新的代码了，我这边可以保证不会丢失文件代码，所以我就想到后端的问题，其实也就是后端的问题，后端把文件给漏了，所以项目缺失文件，无法运行，把缺失的文件重新上传一下就ok啦！其他方法我就不介绍了，比如说在webpack包不识别@符号，删除node依赖包重新安装之类的，我都试过了，都不对，最后在看百度和csdn的各位大佬的排错文章，其中一篇给了我启发。其实很简单的事情，花了一个多小时才解决，害！所在位置 行:1 字符: 20。
vue npm run dev 提示To install them, you can run: npm install --save @/url
test
01-09 8809
vue npm run dev 提示To install them
To install it, you can run: npm install --save core-js/modules/es.error.cause.js
object not found的博客
09-13 1万+
这是最近在做一个后台管理系统下载依赖时报的错，先来看报错提示可以看出它提示我们需要下载这个依赖才能运行（依赖之前已经npm i 过），按照提示进行下载下载完成，重新运行依旧报错，尝试重新把所有依赖全部删除重新下载，结果依旧如此，
一文了解webpack配置
weixin_45799605的博客
02-22 854
webpack基本配置
Web前端开发高级前端技术（高级开发程序篇）
程序员哆啦A梦，蓝胖子
01-27 1万+
（给达达前端加星标，提升前端技能）内容有点多，也请你静下来，慢阅读，今后多多关照。说到web前端开发高级，必须要掌握的是HTML和css代码的优化，前端优化很重要，这是成功你进阶的道路上...
webpack-theme-color-replacer webpack插件 实现web项目 全局修改主题颜色
pnjtvxcp的博客
08-21 5626
第一步安装插件: npm install ---savewebpack-theme-color-replacer 第二步在vue.config.js里面引入 修改配置 const BASE_URL = './' const ThemeColorReplacer = require('webpack-theme-color-replacer') const forElementUI = require('webpack-theme-color-replacer/forElementUI') co..
webpack入门
风火一回，一生不毁
05-05 1386
1.webpack介绍 webpack是一个模块加载器兼打包工具。它是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。支持对react热插拔。 2.安装（使用淘宝镜像） a.全局安装 cnpm install webpack -g b.局部安装（安装在项目根目录下） 首先，自动生成package.json文件 c
Webpack入门与安装指南
1. 模块打包工具： Webpack是一个强大的模块打包工具，它支持两种模块导入规范：ESmodule（如`export default Header` 和 `import Header from './header.js'`）和 CommonJS（如`module.exports = Header` 和 `var ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值