webpack使用手册

超、凢脫俗 2023-06-24 12:24 1阅读 0赞

**目录**

一、webpack安装

二、核心概念

2.1 Bundle、Module、Chunk

2.1.1 Bundle

2.1.2 Module

2.1.3 Chunk

2.2 Entry

2.3 Output

2.4 Loaders

2.4.1 用处

2.4.2 常见的Loaders

2.4.3 Loaders用法

2.5 Plugins

2.5.1 用处

2.5.2 常见的Plugins

2.6 Mode

2.6.1 用处

2.6.2 内置插件

三、资源解析工具

3.1 ES6解析 -- babel-loader

3.1.1 安装

3.1.2 配置

3.1.3 react-jsx解析

3.2 CSS/LESS解析 -- css-loader style-loader

3.2.1 背景

3.2.2 使用

3.2.3 解析less

3.3 图片/文字解析 -- file-loader  url-loader

3.3.1 背景

3.3.2 使用

3.3.3 使用url-loader压缩图片和字体文件

四、监听、热更新、文件指纹

4.1 文件监听

4.1.1 什么是文件监听

4.1.2 开启

4.2 热更新: webpack-dev-server

4.3 文件指纹

4.3.1 什么是文件指纹

4.3.2 文件指纹如何生成

四、HTML/CSS/JS 代码压缩

4.1 JS 文件压缩

4.2 CSS文件压缩

4.2.1 安装

4.2.2 配置

4.3 HTML文件压缩

4.3.1 安装

4.3.2 配置

五、进阶用法

5.1 文件自动清理

5.1.1 安装

5.1.2 配置

5.2 autopreFixer 自动补齐CSS3前缀

5.2.1 安装

5.2.2 配置

5.2.3 问题

5.3 使用px2rem-loader将px自动转成rem

5.3.1 安装

5.3.2 配置

--------------------

# 一、webpack安装 #

**1. 生成初始化package.json**

npm init -y

**2. 安装webpack**

npm install webpack webpack-cli --save-dev

测试安装是否成功

.\node_modules\.bin\webpack -v

# 二、核心概念 #

## 2.1 Bundle、Module、Chunk ##

### 2.1.1 Bundle ###

**Bundle**是由多个不同的模块生成，bundles 包含了早已经过加载和编译的最终源文件版本。 \*\*Bundle 分离（Bundle Splitting）:\*\*这个流程提供了一个优化 build 的方法，允许 webpack 为应用程序生成多个 bundle。最终效果是，当其他某些 bundle 的改动时，彼此独立的另一些 bundle 都可以不受到影响，减少需要重新发布的代码量，因此由客户端重新下载并利用浏览器缓存。

### 2.1.2 Module ###

\*\*模块（Module）\*\*提供比较完整程序接触面（surface area）更小的离散功能块。精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。 **模块解析（Module Resolution）一个模块可以作为另一个模块的依赖模块，resolver 是一个库（libary）用于帮助找不到模块的绝对路径，模块将在resolve.modules**中指定的所有目录内搜索。

### 2.1.3 Chunk ###

**Chunk**这是 webpack 特定的术语被用在内部来管理 building 过程。bundle 是由 chunk 组成，其中有几种类型（例如，入口 chunk(entry chunk)和子 chunk(child chunk)）。通常 chunk 会直接对应所输出的 bundle，但是有一些配置并不会产生一对一的关系。 \*\*代码分离（Code Splitting）\*\*指将代码分离到每个 bundles/chunks 里面，你可以按需加载，而不是加载一个包含全部的 bundle。 \*\*配置（Configuration）\*\*webpack 的配置文件是一个普通的 JavaScript 文件，它导出为一个对象。然后由 webpack 根据这个对象定义的属性进行处理。

## 2.2 Entry ##

webpack是一个模块打包器，会将一切资源，当成模块进行打包，各模块之前存在依赖关系。故需要通过入口文件找到依赖。

// 单入口文件
    module.exports = {
        entry: './path/demo01/src/files'
    };

// 多入口文件
    module.exports = {
        entry: {
            app: './src/app.js',
            app2: './src/app2.js'
        },
        output: {
            filename: '[name].js',  // 通过占位符确保文件名称的唯一，指定打包出来的文件名称
            path: __dirname + '/dist'
        }
    };

## 2.3 Output ##

Output用来指定打包后的文件输出到磁盘中。包括目录和文件名称

// 单入口
    module.exports = {
        entry: './path/demo01/src/files'
        output: {
            filename: 'bundle.js',
            path: __dirname + '/dist'
        }
    };

// 多入口
    module.exports = {
        entry: {
            app: './src/app.js',
            app2: './src/app2.js'
        },
        output: {
            filename: '[name].js',
            path: __dirname + '/dist'
        }    
    };

## 2.4 Loaders ##

### 2.4.1 用处 ###

webpack开箱即用只支持JS和JSON两种文件类型，需要通过Loader来支持其他文件类型，并转换成有效的模块，并添加到模块图中。

### 2.4.2 常见的Loaders ###

<table style="width:688px;"> 
 <tbody> 
  <tr> 
   <td><strong>名称</strong></td> 
   <td style="width:375px;"><strong>描述</strong></td> 
  </tr> 
  <tr> 
   <td>babel-loader</td> 
   <td style="width:375px;">转换ES6\ES7等JS新语法</td> 
  </tr> 
  <tr> 
   <td>css-loader</td> 
   <td style="width:375px;">支持.css文件的加载和解析</td> 
  </tr> 
  <tr> 
   <td>less-loader(sass-loader scss-loader也是一样)</td> 
   <td style="width:375px;">将less文件转换成css</td> 
  </tr> 
  <tr> 
   <td>ts-loader</td> 
   <td style="width:375px;">将TS转换成JS</td> 
  </tr> 
  <tr> 
   <td>file-loader</td> 
   <td style="width:375px;">进行图片、文字等的打包</td> 
  </tr> 
  <tr> 
   <td>raw-loader</td> 
   <td style="width:375px;">将文件以字符串形式导入</td> 
  </tr> 
  <tr> 
   <td>thread-loader</td> 
   <td style="width:375px;">多进程打包JS和CSS</td> 
  </tr> 
 </tbody> 
</table>

### **2.4.3 Loaders用法** ###

'use strict';
    
    const path = require('path')
    
    module.exports = {
        entry: {
            index: './src/index.js',
            search: './src/search.js'
        },
        output: {
            filename: '[name].js',
            path: path.join(__dirname, 'dist'),
        },
        mode: 'production',
        module: {
            // 需要用的loader放到rules数组中
            rules: [
                // test: 指定匹配规则
                // use: 指定使用的loaders名称
                { test:/\.txt$/, use: 'raw-loader'}
            ]
        }
    }

## 2.5 Plugins ##

### **2.5.1 用处** ###

插件用于bundle文件的优化、资源管理和环境变量注入

作用域整个构建过程

### **2.5.2 常见的Plugins** ###

<table style="width:688px;"> 
 <tbody> 
  <tr> 
   <td><strong>名称</strong></td> 
   <td style="width:375px;"><strong>描述</strong></td> 
  </tr> 
  <tr> 
   <td>CommonsChunkPlugin</td> 
   <td style="width:375px;">将chunks相同的模块代码提取成公共js</td> 
  </tr> 
  <tr> 
   <td>CleanWebpackPlugin</td> 
   <td style="width:375px;">清理构建目录</td> 
  </tr> 
  <tr> 
   <td>ExtractTextWebpackPlugin</td> 
   <td style="width:375px;">将CSS从bunlde文件里提取成一个独立的css文件</td> 
  </tr> 
  <tr> 
   <td>CopyWebpackPlugin</td> 
   <td style="width:375px;">将文件或文件夹拷贝到构建的输出目录</td> 
  </tr> 
  <tr> 
   <td>HtmlWebpackPlugin</td> 
   <td style="width:375px;">创建html文件去承载输出的bundle</td> 
  </tr> 
  <tr> 
   <td>raw-loader</td> 
   <td style="width:375px;">将文件以字符串形式导入</td> 
  </tr> 
  <tr> 
   <td>thread-loader</td> 
   <td style="width:375px;">多进程打包JS和CSS</td> 
  </tr> 
 </tbody> 
</table>

## 2.6 Mode ##

### 2.6.1 用处 ###

用来指定当前的构建环境是：production、development或是none

设置mode可以使用webpack内置的函数，默认 production

### 2.6.2 内置插件 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70][]

# 三、资源解析工具 #

## 3.1 ES6解析 -- babel-loader ##

### 3.1.1 安装 ###

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

### 3.1.2 配置 ###

'use strict';
    
    const path = require('path')
    
    module.exports = {
        entry: {
            index: './src/index.js',
            search: './src/search.js'
        },
        output: {
            filename: '[name].js',
            path: path.join(__dirname, 'dist'),
        },
        mode: 'production',
        module: {
            rules: [
                // test: 指定匹配规则
                // use: 指定使用的loaders名称
                { 
                    test:/.js$/, 
                    use: 'babel-loader'
                }
            ]
        },
        plugins: [
        ]
    }

新建.babelrc.js文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 1][]

// .babelrc
    {
        "presets": [
            "@babel/preset-env"
        ]
    }

### **3.1.3 react-jsx解析** ###

npm i react react-dom @babel/preset-react -D

修改.babelrc.js文件

{
        "presets": [
            "@babel/preset-env",
            "@babel/preset-react" // 用于解析react语法
        ]
    }

## 3.2 CSS/LESS解析 -- css-loader style-loader ##

### 3.2.1 背景 ###

css-loader用于加载.css文件，并将其转换成 commonjs 对象

style-loader 将样式通过<style>标签插入到head中

### 3.2.2 使用 ###

**安装**

npm -i style-loader css-loader -D

**配置：**

// webpack.config.js
    'use strict';
    
    const path = require('path')
    
    module.exports = {
        entry: {
            index: './src/index.js',
            search: './src/search.js'
        },
        output: {
            filename: '[name].js',
            path: path.join(__dirname, 'dist'),
        },
        mode: 'production',
        module: {
            rules: [
                // test: 指定匹配规则
                // use: 指定使用的loaders名称
                { 
                    test: /.js$/, 
                    use: 'babel-loader'
                },
                {
                    test: /.css$/,
                    use: [
                        'style-loader',
                        'css-loader'
                    ]
                }
            ]
        },
        plugins: [
        ]
    }

### 3.2.3 解析less ###

npm i less less-loader -D

module: {
            rules: [
                // test: 指定匹配规则
                // use: 指定使用的loaders名称
                { 
                    test: /.js$/, 
                    use: 'babel-loader'
                },
                {
                    test: /.css$/,
                    use: [
                        'style-loader',
                        'css-loader'
                    ]
                },
                {
                    test: /.less$/,
                    use: [
                        'style-loader',
                        'css-loader',
                        'less-loader'
                    ]
                }
            ]
        },

## 3.3 图片/文字解析 -- file-loader  url-loader ##

### 3.3.1 背景 ###

可以使用file-loader对文字和图片进行处理

url-loader实际上就是在file-loader基础上进行了封装，可以对设定 limit 大小的图片和字体文件，自动进行base64的转换

### 3.3.2 使用 ###

npm i file-loader -D

module: {
            rules: [
                .....
                {
                    test: /.(png|jpg|gif|jpeg)$/,
                    use: 'file-loader'
                },
                {
                    test: /.(woff|woff2|eot|ttf|otf)$/,
                    use: 'file-loader'
                }
            ]
        },

### 3.3.3 使用url-loader压缩图片和字体文件 ###

module: {
            rules: [
                .....
                {
                    test: /.(png|jpg|gif|jpeg)$/,
                    use: {
                        loader: 'url-loader',
                        options: {
                            limit: 2048 // 图片小于2k 
                        }
                    }
                },
                {
                    test: /.(woff|woff2|eot|ttf|otf)$/,
                    use: {
                        loader: 'url-loader',
                        options: {
                            limit: 2048 // 图片小于2k 
                        }
                    }
                }
            ]
        },

# 四、监听、热更新、文件指纹 #

## 4.1 文件监听 ##

### 4.1.1 什么是文件监听 ###

即在发现源码发生变化时，自动重新构建出新的输出文件

### **4.1.2 开启** ###

文件监听有两种开启方式：

**1） 在启动webpack时，带上 --watch 参数**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 2][]

**2）在配置webpack.config.js中，设置watch:true**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 3][]

## 4.2 热更新: webpack-dev-server ##

不刷新浏览器，且放在内存中。使用HotModuleReplacementPlugin插件。

npm i webpack-dev-server -D

// webpack.config.js
    const webpack = require('webpack');
    
    module.exports = {
        ...
        module: {
            rules: [
                ...
            ]
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin()
        ],
        devServer: {
            contentBase: './dist',
            hot: true
        }
    }

// package.json
     "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack --config webpack.config.js",
        "watch": "webpack --watch",
        "dev": "webpack-dev-server --open"
      }

## 4.3 文件指纹 ##

### **4.3.1 什么是文件指纹** ###

修改打包后输出的文件名的后缀

### **4.3.2 文件指纹如何生成** ###

**Hash: **与整个项目的构建相关，只要项目文件有修改，整个项目构建hash值就会更改

**Chunkhash:** 和webpack打包的chunk有关，不同的 entry 会生成不同的 chunkhash 值

**Contenthash:** 根据文件内容来定义 hash，文件内容不变，则 contenthash 不变

**4.3.3 文件指纹的使用**

设置 MiniCssExtractPlugin 的 filename

<table> 
 <tbody> 
  <tr> 
   <td style="width:188px;"><strong>占位符名称</strong></td> 
   <td style="width:591px;"><strong>含义</strong></td> 
  </tr> 
  <tr> 
   <td style="width:188px;">[ext]</td> 
   <td style="width:591px;">资源后缀名</td> 
  </tr> 
  <tr> 
   <td style="width:188px;">[name]</td> 
   <td style="width:591px;">文件名称</td> 
  </tr> 
  <tr> 
   <td style="width:188px;">[paht]</td> 
   <td style="width:591px;">文件的相对路径</td> 
  </tr> 
  <tr> 
   <td style="width:188px;">[folder]</td> 
   <td style="width:591px;">文件所在的文件夹</td> 
  </tr> 
  <tr> 
   <td style="width:188px;">[contenthash]</td> 
   <td style="width:591px;">文件的内容Hash，默认是md5生成</td> 
  </tr> 
  <tr> 
   <td style="width:188px;">[hash]</td> 
   <td style="width:591px;">文件内容的Hash，默认是md5生成</td> 
  </tr> 
  <tr> 
   <td style="width:188px;">[emoji]</td> 
   <td style="width:591px;">一个随机的指代文件内容的emoji</td> 
  </tr> 
 </tbody> 
</table>

**安装：**

npm i mini-css-extract-plugin -D

// webpack.prod.js
    module.exports = {
        output: {
            filename: '[name]_[chunkhash:8].js',
            path: path.join(__dirname, 'dist'),
        },
         module: {
             rules: [
                ..
                {
                    test: /.css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader'
                    ]
                },
                {
                    test: /.less$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        'less-loader'
                    ]
                },
                // 使用file-loader
                {
                    test: /.(png|jpg|gif|jpeg)$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '[name]_[hash:8].[ext]'
                            }
                        }
                    ]
                },
                {
                    test: /.(woff|woff2|eot|ttf|otf)$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '[name]_[hash:8].[ext]'
                            }
                        }
                    ]
                }
            ]
        }
    }

# 四、HTML/CSS/JS 代码压缩 #

## 4.1 JS 文件压缩 ##

webpack 内置了 uglifyjs-webpack-plugin

## 4.2 CSS文件压缩 ##

使用 optimize-css-assets-webpack-plugin

### **4.2.1 安装** ###

npm i optimize-css-assets-webpack-plugin -D
    npm i cssnano -D // 前者依赖cssnano，故也需要安装

### **4.2.2 配置** ###

// webpack.prod.js
    
    // 引入插件 
    const OptionsCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
    
    // 使用插件
    module.exports = {
        ...  
        plugins: [
            new OptionsCssAssetsWebpackPlugin({
                assetNameRegExp: /\.css$/g,
                cssProcessor: require('cssnano')
            })
        ]
    }

## 4.3 HTML文件压缩 ##

使用html-webpack-plugin

### **4.3.1 安装** ###

npm i html-webpack-plugin -D

### **4.3.2 配置** ###

// webpack.prod.js
    
    // 引入插件 
    const OptionsCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
    
    // 使用插件
    module.exports = {
        ...  
        plugins: [
            new HtmlWebpackPlugin({
                template: path.join(__dirname, "src/search.html"), // html模板所在位置
                filename: 'search.html', // 打包出来的名称
                chunks: ['search'], // 指定生成的html使用哪些chunk
                inject: true, // 打包后的css会自动注入
                minify: {
                    html5: true,
                    collapseWhitespace: true,
                    preserveLineBreaks: false,
                    minifyCSS: true,
                    minifyJS: true,
                    removeComments: false
                }
            }),
            new HtmlWebpackPlugin({
                template: path.join(__dirname, "src/index.html"), // html模板所在位置
                filename: 'index.html', // 打包出来的名称
                chunks: ['index'], // 指定生成的html使用哪些chunk
                inject: true, // 打包后的css会自动注入
                minify: {
                    html5: true,
                    collapseWhitespace: true,
                    preserveLineBreaks: false,
                    minifyCSS: true,
                    minifyJS: true,
                    removeComments: false
                }
            })
        ]
    }

# 五、进阶用法 #

## 5.1 文件自动清理 ##

为了避免每次构建前都要手动删除dist，要使用 clean-webpack-plugin 实现自动删除dist

### **5.1.1 安装** ###

npm i clean-webpack-plugin -D

### **5.1.2 配置** ###

// webpack.prod.js
    
    // 引入
    const { CleanWebpackPlugin } = require('clean-webpack-plugin');
    
    // 使用
    module.exports = {
        plugins: [
            new CleanWebpackPlugin()
        ]
    }

## ##

## 5.2 autopreFixer 自动补齐CSS3前缀 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 4][]

由于要兼容各种浏览器，手动去编写太耗时间。可以使用PostCSS的插件autopreFixer，在代码生成时处理

### **5.2.1 安装** ###

npm i postcss-loader autoprefixer -D

### **5.2.2 配置** ###

// webpack.prod.js
    
    module.exports = {
        module: {
            rules: [
                {
                    test: /.css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader'
                    ]
                },
                {
                    test: /.less$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        'less-loader',
                        {
                            loader: 'postcss-loader',
                            options: {
                                plugins: () => [
                                    require('autoprefixer')({
                                         browsers: ['last 2 version', '>1%', 'ios 7'] // 低版本
                                        // overrideBrowserslist: ['last 2 version', '>1%', 'ios 7']  // 高版本
                                    })
                                ]
                            }
                        }
                    ]
                },
            ]
    }

### **5.2.3 问题** ###

若在打包过程中出现下面的错误，是因为版本台新，将 browsers 换成 overrideBrowsersList 即可

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 5][]

## 5.3 使用px2rem-loader将px自动转成rem ##

过去使用媒体查询来适配各种屏幕的手机，之后出现了rem。但设置<html>上的html需要手动写js。这里可以用px2rem-loader将px自动转换成rem。

同时，可以使用lib-flexible库来动态计算根元素的rem的单位(px)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 6][]

### **5.3.1 安装** ###

npm i px2rem-loader -D
    npm i lib-flexible -S

### **5.3.2 配置** ###

// webpack.prod.js
    
    module.exports = {
        module: {
            rules: [
                {
                    test: /.css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader'
                    ]
                },
                {
                    test: /.less$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        'less-loader',
                        {
                            loader: 'postcss-loader',
                            options: {
                                plugins: () => [
                                    require('autoprefixer')({
                                        // browsers: ['last 2 version', '>1%', 'ios 7']
                                        overrideBrowserslist: ['last 2 version', '>1%', 'ios 7']  // 高版本
                                    })
                                ]
                            }
                        },
                        {
                            loader: 'px2rem-loader',
                            options: {
                                remUnit: 75, // 代表 1rem = 75px 适合 750的视觉稿
                                remPrecesion: 8 // 代表px转换成rem后，小数点位数
                            }
                        }
                    ]
                }
            ]
        }
    }

参考链接：

webpack中的bundle、module、chunk: [https://juejin.im/post/5d70ad50f265da03cf7aae91][https_juejin.im_post_5d70ad50f265da03cf7aae91]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191224144334242.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191224151439975.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191226231236208.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191226231316665.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2019122711195420.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191227114434978.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191227114743146.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70
[https_juejin.im_post_5d70ad50f265da03cf7aae91]: https://juejin.im/post/5d70ad50f265da03cf7aae91