Webpack前端面试专用

￡神魔★判官ぃ 2022-09-07 14:54 224阅读 0赞

## 什么是webpack ##

webpack 是一个现代 JavaScript 应用程序的**静态模块打包器**，当 webpack 处理应用程序时，会**递归**构建一个**依赖关系图**，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个 bundle。

## 要素 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70]  
plugin:在webpack运行的生命周期中会广播出许多**事件**，plugin可以**监听**这些事件，在合适的时机通过webpack提供的API改变输出结果。

loader和plugin的区别

1.  对于loader，它是一个转换器，将A文件进行编译形成B文件，这里操作的是文件，比如将A.scss转换为A.css，单纯的文件转换过程
2.  plugin是一个扩展器，它丰富了webpack本身，针对是loader结束后，webpack**打包**的整个过程，它并不直接操作文件，而是**基于事件机制**工作，会监听webpack打包过程中的某些节点，执行广泛的任务.

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 1]  
开发环境和生产环境都自动启用一些插件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 2]  
soureceMap：建立打包后的文件和打包之前的文件中的映射关系。配置：  
如果不用sourceMap，可以将值写为false。使用的话也可以直接写source-map  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 3]  
webpack-dev-server  
功能：1. 监听文件的变化，自动编译刷新，方便开发。  
2. 请求转发。  
注意！这里只是在开发环境下会请求转发，但是生产环境不会。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 5]

模块热替换HMR：在dev-server里设置hot:true。  
修改CSS文件，而不对网页进行整体刷新 ，反而将CSS的样式进行修改。  
如果对JS文件进行模块热替换，还需要在index.js中指定监听某个模块的更改，否则其他模块也会随着更改。比如以下代码是监听了number.js模块的更改，更改后删除之前js生成的DOM，然后重新执行新的number函数。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 6]

## 热更新的原理 ##

https://juejin.cn/post/6844904008432222215\#heading-0  
每次编译完成后会生成新的.js和.json文件，以及**新的hash值**，这个值用于下一次编译完成后的文件名。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YiYU3VybWFu_size_20_color_FFFFFF_t_70_g_se_x_16]  
**热更新的原理过程：**

1.  在webpack-dev-server中启动热更新后，在建立本地server和浏览器的**websocket连接**。websocket连接是浏览器和服务器的**全双工**的连接，不受同源策略的限制。
2.  **监听**。在项目启动之后，Webpack 会通过 Compiler 类的 Run 方法开启编译构建过程，编译完成后，调用 **Watch 方法监听文件变更**，当文件发生变化，重新编译，编译完成之后继续监听。

监听到文件变化后，通知**构建工具（HMR plugin）**，将发生变化的文件（模块）发送给跑在**应用程序(客户端)里的运行时框架（HMR Runtime）**，由运行时框架把这些模块塞进模块系统（新增/删除，或替掉现有模块）  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YiYU3VybWFu_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
3. 当每次编译完成后，本地server通过websocket给浏览器**发送通知**。这样浏览器就可以拿到最新的hash值了，做检查更新逻辑，检查更新呢调用的是module.hot.check方法。判断是否要更新页面以及如何更新。  
4. 当需要更新页面的时候，浏览器通过jsonp的方式获得服务端的需要更新的最新的文件。为什么使用JSONP获取最新代码？主要是因为JSONP获取的代码可以直接执行。  
5. 热更新**替换模块**。首先删除过期的模块，就是需要替换的模块；其次将新的模块添加到 modules 中；最后通过\_\_webpack\_require\_\_执行相关模块的代码  
6. 最后通过**accept事件**通知应用层使用新的模块进行“局部刷新”：

拆分配置&合并配置  
将开发环境和生产环境的共有配置可以卸载公共配置文件里，然后再分别进行合并。避免再不同的环境切换时，需要修改配置。  
1、通过不同的命令来运行不同的环境。生产：npm run build。  
其中第二个是启动webpack-dev-server的配置。  
![在这里插入图片描述][c1910308e0da459194201fb8cc5f9387.png]

2、写公共配置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 7]  
3、合并配置。通过webpack-merge中的smart函数进行合并  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 8]  
**处理图片**  
顺序：首先进行预处理，将.scss/.less转换成css代码；  
postcss-loader进行兼容性的处理；  
css-loade解析CSS代码，将CSS文件变成CommonJS模块加载到JS中；  
style-loader创建style标签，将js中的样式资源插入，添加到head中。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 9]

**处理图片**

1.生产环境：使用url-loader，这样小图片使用base64编码，可以减少一次网络请求，大图片还是file-loader将大图片打包放在dist目录，防止加载太慢。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 10]  
开发环境：可以直接使用file-loader，这样会直接将图片打包到dist目录下。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 11]  
**多入口**：可以同时打包多个页面。  
首先在入口处指定多个入口文件。输出的文件名根据入口的名字指定。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 12]  
配置html-webpack-plugin，其中chunk是指再html文件中需要引入什么js代码模块。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 13]  
**抽离CSS**  
原本CSS文件是通过style-loader生成了style标签，插入在head里面，但是一般在**生产环境**里，想抽离CSS生成一个单独的CSS文件。

1.  需要下载并引入mini-css-extract-plugin插件。以及下面两个分别是压缩js和css的插件。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 14]
2.  不再使用style.loader，而是使用mini-css-extract-plugin里面的loader，因此需要修改module.  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 15]
3.  修改plugin，还可以优化进行压缩。filename是输出的.css文件的名字。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 16]  
    **抽离公共代码**(代码分割)  
    抽离公共代码的情况，一般在生产环境才进行配置。  
    ![在这里插入图片描述][60ee5a8482614cd985f68a95f802921b.png]  
    代码分割的配置：  
    在optimization中的splitChunks。其中有图中几个参数。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 17]  
    cacheGroups中分为两类。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 18]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 19]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 20]  
    使用分割后的代码。在html-webpack-plugin的chunks中指明引入html文件中。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 21]

抽离的结果：在dist文件下分别生成了公共js和第三方的js文件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 22]

## babel ##

让代码在低版本浏览器中也能顺利展示。  
安装babel-loader 和 @babel/core

Babel默认只转换新的JavaScript语法，而不转换新的API。 例如，Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转译。 如果想使用这些新的对象和方法，则需要为当前环境提供一个polyfill

**babel-polyfill**  
它会”加载整个polyfill库”，针对编译的代码中新的API进行处理，并且在代码中插入一些帮助函数。  
它会将代码所需要的api的函数直接写入文件中，**缺点：**  
直接在代码中插入帮助函数，会导致污染了全局环境，并且不同的代码文件中包含重复的代码，导致编译后的代码体积变大。

**babel-runtime**  
Babel为了解决这个问题，提供了单独的包babel-runtime用以提供编译模块的工具函数， 启用插件babel-plugin-transform-runtime后，Babel就会使用babel-runtime下的工具函数.  
这样会从babel-runtime的包中引入需要的函数，而不会直接将函数写入代码文件中。这样可以避免自行引入polyfill时导致的污染全局命名空间的问题。  
使用babel-runtime需要额外安装**babel-runtime**和**babel-plugin-transform-runtime**依赖包， 然后在.babelrc配置文件中启用transform-runtime,

babel-plugin-transform-runtime 就是可以在我们使用新 API 时自动 import babel-runtime 里面的 polyfill。而不用手动去引入。

**优势**

*  不会污染全局变量
 *  多次使用只会打包一次
 *  依赖统一按需引入,无重复引入,无多余引入
 *  避免 babel 编译的工具函数在每个模块里重复出现，减小库和工具包的体积、

**劣势**

*  不支持实例化的方法如 Array.includes(x) 就不能转化
 *  如果使用的API用的次数不是很多，那么transform-runtime 引入polyfill的包会比不是transform-runtime 时大

## NPM ##

参考文章：  
https://juejin.cn/post/6844903870578032647\#heading-14  
https://www.godrry.com/archives/in-short-the-overall-process-of-npm-install.html

**package-lock.json**  
从npm 5.x开始，执行npm install时会自动生成一个package-lock.json 文件。  
npm为了让开发者在安全的前提下使用最新的依赖包，在package.json中通常做了锁定大版本的操作，这样在每次npm install的时候都会拉取依赖包大版本下的最新的版本。这种机制最大的一个缺点就是当有依赖包有小版本更新时，可能会出现协同开发者的依赖包不一致的问题。  
package-lock.json文件精确描述了node\_modules 目录下所有的包的树状依赖结构，每个包的版本号都是完全精确的。以sass-loader在package-lock.json中为例：

"dependencies": { 
      "sass-loader": { 
        "version": "7.1.0",
        "resolved": "http://registry.npm.taobao.org/sass-loader/download/sass-loader-7.1.0.tgz",
        "integrity": "sha1-Fv1ROMuLQkv4p1lSihly1yqtBp0=",
        "dev": true,
        "requires": { 
          "clone-deep": "^2.0.1",
          "loader-utils": "^1.0.1",
          "lodash.tail": "^4.1.1",
          "neo-async": "^2.5.0",
          "pify": "^3.0.0",
          "semver": "^5.5.0"
        },
        "dependencies": { 
          "pify": { 
            "version": "3.0.0",
            "resolved": "http://registry.npm.taobao.org/pify/download/pify-3.0.0.tgz",
            "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
            "dev": true
          }
        }
      }
    }

package-lock.json的详细描述主要由version、resolved、integrity、dev、requires、dependencies这几个字段构成：

*  version：包唯一的版本号
 *  resolved：安装源
 *  integrity：表明包完整性的hash值（验证包是否已失效）
 *  dev：如果为true，则此依赖关系仅是顶级模块的开发依赖关系或者是一个的传递依赖关系
 *  requires：依赖包所需要的所有依赖项，对应**依赖包package.json里dependencies**中的依赖项
 *  dependencies：**依赖包node\_modules中依赖的包**

在上面的package-lock.json文件中可以发现，在requires和dependencies中都存在pify依赖项。那我们顺便去node\_modules里面探下究竟：

1.  打开根目录的node\_modules会发现安装了sass-loader所需要的所有依赖包，这些依赖包中除了pify以外，所有依赖包的大版本号都与sass-loader所需要的一致。
2.  到根目录的node\_modules找到pify依赖包，发现版本为4.0.1。
3.  找到sass-loader项目依赖包，打开其node\_modules发现其中也存在个pify依赖包，但版本为3.0.0。这个版本的sass-loader真正依赖的是这个版本的pify。

通过以上几个步骤，说明package-lock.json文件和node\_modules目录结构是一一对应的，**即项目目录下存在package-lock.json可以让每次安装生成的依赖目录结构保持相同**。

在开发一个应用时，建议把package-lock.json文件提交到代码版本仓库，从而让你的团队成员、运维部署人员或CI系统可以在执行npm install时安装的依赖版本都是一致的。  
但是在开发一个库时，则不应把package-lock.json文件发布到仓库中。实际上，npm也默认不会把package-lock.json文件发布出去。之所以这么做，是因为库项目一般是被其他项目依赖的，在不写死的情况下，就可以复用主项目已经加载过的包，而一旦库依赖的是精确的版本号那么可能会造成包的冗余。

**npm install的具体流程**  
检查项目中有无 lock 文件：

无 lock 文件：

1.  从 npm 远程仓库获取包信息
2.  根据 package.json 构建**依赖树**，构建过程：
3.  构建依赖树时，不管其是直接依赖还是子依赖的依赖，优先将其放置在 **node\_modules 根目录**。
4.  当**遇到相同模块**时，判断已放置在依赖树的模块版本是否符合新模块的版本范围，如果符合则跳过，不符合则在**当前模块的 node\_modules** 下放置该模块。
5.  注意这一步只是确定**逻辑上**的依赖树，并非真正的安装，后面会根据这个依赖结构去下载或拿到缓存中的依赖包
6.  在**缓存**中依次查找依赖树中的每个包

不存在缓存：

1.  从 npm 远程仓库下载包
2.  校验包的完整性
3.  校验不通过： 重新下载

校验通过：

1.  将下载的包复制到 npm 缓存目录
2.  将下载的包按照依赖结构解压到 node\_modules

存在缓存：

1.  将缓存按照依赖结构解压到 node\_modules
2.  生成 lock 文件

有 lock 文件：

1.  检查 package.json 中的依赖版本是否和 package-lock.json 中的依赖有冲突。
2.  如果没有冲突，直接跳过获取包信息、构建依赖树过程，开始在缓存中查找包信息，后续过程相同

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70]: /images/20220829/bce2ca8d742d48de8da24dff4c0ea230.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 1]: /images/20220829/dd5f9e80fb29433b9923ef4309f44297.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 2]: /images/20220829/aeefcac22a864db19ff62334a49bf5f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 3]: /images/20220829/2b1f41db566e4382a2791cc6364841a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 4]: /images/20220829/3bd307cf24654ca9b5dd1ab5d5d6ff3b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 5]: /images/20220829/ddd1b2dfd48248f499d8f614d1f23ec3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 6]: /images/20220829/315db07d80e64538a3fe064c9de0e9f0.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YiYU3VybWFu_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/012f5ee8b9ca4774b1b5e78f51f03a96.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YiYU3VybWFu_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/d3eea68d2b8f4677ba8ad6e3f7cd2e29.png
[c1910308e0da459194201fb8cc5f9387.png]: /images/20220829/4c203f4b9b9c403f9baa419e654d453c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 7]: /images/20220829/b0e01467e967473abc9874e23b405692.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 8]: /images/20220829/a35e46cb3eb749cb9f09c804a6cf474f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 9]: /images/20220829/5d3a1a9aa863400cb9f85dfc5514bcaf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 10]: /images/20220829/48746b61193a48e29b850e50079fa109.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 11]: /images/20220829/7f9beaa3e59f44c2acbbbfda8dadc3f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 12]: /images/20220829/6512467ad5cc42c896e9389467b46e93.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 13]: /images/20220829/686a7b1766e84f09aa374bda9b953980.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 14]: /images/20220829/5c78fdd5e79641438befd6195dcdd2f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 15]: /images/20220829/3e38989cfc18460d8313c2a12ab76f48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 16]: /images/20220829/0c5e3c853b084dc2bde75e7606a0492e.png
[60ee5a8482614cd985f68a95f802921b.png]: /images/20220829/c3b6d8568e8c4f5d8f67cf314bf998f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 17]: /images/20220829/866343e4033f4eec88019b1a670bb6f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 18]: /images/20220829/977e4d4a6b2c4bcc87c3f4959e40d4fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 19]: /images/20220829/9bc2e34b0bbb4e22a8aebafa4543c852.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 20]: /images/20220829/4a81242a3d34450c98e584c52ed2a6b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 21]: /images/20220829/ff703ee55f954a50bf6dde0f034f09d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5NDI5OQ_size_16_color_FFFFFF_t_70 22]: /images/20220829/b18828c1524740c4bd24d1ebfe7de30d.png