【Webpack 生产环境配置】近两万字长文总结学习如何提取css为单独文件、css的压缩和兼容性处理，如何压缩html和js、如何做js语法检查eslint和js兼容性处理babel！！！

约定不等于承诺〃 2022-09-06 13:29 102阅读 0赞

**webpack系列文章：**

*  [【Webpack 性能优化系列(9) - 多进程打包】极大的提升项目打包构建速度！！！][Webpack _9_ -]
 *  [【Webpack 性能优化系列(8) - PWA】使用渐进式网络应用程序为我们的项目添加离线体验][Webpack _8_ - PWA]
 *  [【Webpack 性能优化系列(7) - 懒加载和预加载】][Webpack _7_ -]
 *  [【Webpack 性能优化系列(6) - code splitting 】通过代码分割来获取更小的 bundle，优化资源加载][Webpack _6_ - code splitting _ bundle]
 *  [【Webpack 性能优化系列(5) - tree shaking 】去除未引用代码，减少代码体积！！！][Webpack _5_ - tree shaking]
 *  [【Webpack 性能优化系列(4) - 缓存 】详解如何做bable缓存和文件资源缓存][Webpack _4_ - _ _bable]
 *  [【Webpack 性能优化系列(3) - oneOf】][Webpack _3_ - oneOf]
 *  [【Webpack 性能优化系列(2) - source-map】][Webpack _2_ - source-map]
 *  [【Webpack 性能优化系列(1) - HMR 热模块替换】][Webpack _1_ - HMR]
 *  [【Webpack 开发环境配置】万字长文总结学习如何打包样式资源、html资源、图片资源和其他资源？devServer是什么，如何配置？][Webpack _html_devServer]
 *  [【Webpack 简介及五个核心概念】][Webpack]

### 文章目录 ###

*  生产环境
 *  提取css成单独文件
 *  css兼容性处理
 *  压缩css
 *  js语法检查eslint
 *  js兼容性处理bable、core-js
 *  js压缩
 *  压缩html
 *  生产环境配置总结——一个完整的开发环境配置
 *  参考

# 生产环境 #

生产环境的特点是能让代码**优化上线运行的环境**。

我们要做哪些事情呢？

**样式经过`css-loader`的处理被整合在js中，如果样式在js中的话，会让js体积非常大，下载就会慢；**

**同时因为是先加载js才能通过创建`style`标签插入到页面中，这里就会出现闪屏现象。**

**所以，我们就需要将css从js中提取出来；**

**当然还需要对代码进行压缩和兼容性处理，这里包括html、css和js。**

# 提取css成单独文件 #

**`mini-css-extract-plugin`这个插件会将 CSS 提取到单独的文件中**

下载这个插件：

npm install --save-dev mini-css-extract-plugin

在配置文件`webpack.config.js`中引用：

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

**和开发环境中不同的一点，这里我们会用`MiniCssExtractPlugin.loader`这个loader取代`style-loader`。**

**`MiniCssExtractPlugin.loader`作用：提取js中的css成单独文件。**

因为这个loade提取js中的css成单独文件，所以不需要`style-loader`再创建style标签，放入样式了。

具体的`webpack.config.js`配置如下：

const {  resolve } = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    
    module.exports = { 
      entry: './src/js/index.js',
      output: { 
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
      },
      module: { 
        rules: [
          { 
            test: /\.css$/,
            use: [
              // 创建style标签，将样式放入
              // 'style-loader', 
              // 这个loader取代style-loader。作用：提取js中的css成单独文件
              MiniCssExtractPlugin.loader,
              // 将css文件整合到js文件中
              'css-loader'
            ]
          }
        ]
      },
      plugins: [
        new HtmlWebpackPlugin({ 
          template: './src/index.html'
        }),
        new MiniCssExtractPlugin()
      ],
      mode: 'development'
    };

实例项目目录和文件内容：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 3]  
使用当前配置打包运行一下，会发现打包后的build下面多了一个`main.css`文件  
![在这里插入图片描述][08938ed9496b4fc29924260fe310fa44.png]  
这个`main.css`会把我们之前的样式全都加载进来：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 4]

再看`index.html`，它会自动引入打包生产的资源  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 5]  
打开build下的`index.html`，样式正常  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 6]  
**如果我们希望打包后的资源和之前的项目目录结构是一样的，可以在插件使用的地方配置`filename`属性，重命名即可。**

配置如下：

删掉前面打包的build文件，重新打包运行，可以看到build目录下面多了css目录，以及目录下面被我们重命名的`built.css`。  
![在这里插入图片描述][be2001a55b5d4eecbc30dcea73f1e167.png]  
**因为这样方式加载的样式是通过`link`标签引入，而不是`style`标签，所以不会产生闪屏现象；并且css文件和js文件分割开了，js文件体积也没那么大，解析速度也会更好一些。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 7]

# css兼容性处理 #

**css兼容性处理需要用到`postcss`这个库，`postcss`在webpack中使用需要用到一个`postcss-loader`和一个插件`postcss-preset-env`**

就是这个东东  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 9]  
**下载`postcss-loader`和`postcss-preset-env`:**

npm install --save-dev postcss-loader postcss-preset-env

有两种使用方式，第一种是使用`postcss-loader`的默认配置（就是直接把loader名以字符串的形式加到处理css loader的数组里）：

{ 
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          // 使用loader的默认配置
          'postcss-loader'
        ]
      }

但是现在不能使用默认配置，我们需要修改loader的配置，那就得写成对象的形式，在`options`属性里修改loader的配置

第二种方式：

{ 
         test: /\.css$/,
         use: [
           MiniCssExtractPlugin.loader,
           'css-loader',
           // 使用loader的默认配置
           // 'postcss-loader',
           // 修改loader的配置
           { 
             loader: 'postcss-loader',
             options: { 
               ident: 'postcss',// 固定写法
               plugins: () => [
                 // 使用我们前面下载的postcss插件
                 require('postcss-preset-env')()
               ]
             }
           }
         ]
       }

前面的配置里我们在`postcss-loader`里配置了要使用的**插件`postcss-preset-env`，这个插件的作用是帮postcss找到`package.json`中`browserslist`里面的配置，通过配置加载指定的css兼容性样式。**

**所以我们现在还需要做一步，就是写这个`browserslist`**

**在`package.json`里加一个`browserslist`属性，值为对象，对象里面可以写两个参数，`development`(代表开发环境配置) 和 `production`(代表生产环境配置)**

具体写法：

"browserslist": { 
    	// 开发环境
        "development": [
          "last 1 chrome version",//兼容最近的chrome浏览器版本
          "last 1 firefox version",
          "last 1 safari version"
        ],
        // 生产环境
        "production": [
          ">0.2%",// 大于99.8%的浏览器，基本上全部的浏览器
          "not dead",// 不要已经死的浏览器，比如ie10
          "not op_mini all"// 不要op_mini所有的，因为op_mini早都死完了，所以不要它，而且在国内基本没有人使用这种东西，所以全都不要
        ]
      },

**开发环境不需要做太多，兼容一些主要浏览器的调试版本就足够了；但是生产环境就要多写一点，具体看上面生产环境配置**

更多的配置大家可以去github搜关键字`browserslist`，上面有一个仓库，里面详细介绍了我们可以在`browserslist`写哪些参数，以及参数详细的配置。

现在验证一下前面的配置靠不靠谱，改动一下样式，添加一些有兼容性问题的样式

display: flex;
      backface-visibility: hidden;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 10]  
**`postcss-preset-env`这个插件默认情况下就是找生产环境配置，也就是说默认使用`browserslist`里的`production`配置，跟`webpack.config.js`webpack配置里的模式 `mode: 'development'`是没有关系的。**

**我们做实例演示，想要变成开发环境，需要设置node环境变量：**

// 设置nodejs环境变量
    process.env.NODE_ENV = 'development';

**css兼容性处理最终配置：**

const {  resolve } = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    
    // 设置nodejs环境变量
    process.env.NODE_ENV = 'development';
    
    module.exports = { 
      entry: './src/js/index.js',
      output: { 
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
      },
      module: { 
        rules: [
          { 
            test: /\.css$/,
            use: [
              MiniCssExtractPlugin.loader,
              'css-loader',
              /* css兼容性处理：postcss --> postcss-loader postcss-preset-env 帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式 "browserslist": { // 开发环境 --> 设置node环境变量：process.env.NODE_ENV = development "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ], // 生产环境：默认是看生产环境 "production": [ ">0.2%", "not dead", "not op_mini all" ] } */
              // 使用loader的默认配置
              // 'postcss-loader',
              // 修改loader的配置
              { 
                loader: 'postcss-loader',
                options: { 
                  ident: 'postcss',
                  plugins: () => [
                    // postcss的插件
                    require('postcss-preset-env')()
                  ]
                }
              }
            ]
          }
        ]
      },
      plugins: [
        new HtmlWebpackPlugin({ 
          template: './src/index.html'
        }),
        new MiniCssExtractPlugin({ 
          filename: 'css/built.css'
        })
      ],
      mode: 'development'
    };

**上面的配置修改了环境变量，`postcss-preset-env`插件会以开发环境的配置做兼容性处理，开发环境只做了主要浏览器最近的版本，我们打包运行实例验证一下，打开build里面的样式代码**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 11]  
**我们发现，它对`backface-visibility`做了兼容性处理，flex没有做处理**

**接着我们测试生产环境的兼容性配置，注释掉修改环境变量，没有设置环境变量，默认就是找生产环境：**

// 设置nodejs环境变量
    // process.env.NODE_ENV = 'development';

重新打包运行  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 12]  
**这时候我们发现，生产环境还多了一个`dlisplay:-webkit-box;`，这个就是做了一个兼容性处理**

**通过`postcss`的处理，我们在写样式的时候就不用太过操心兼容性问题，可以把它都交给工具，让工具自动去完成，这样就大大解放了开发人员的一些复杂的操作，只需要考虑最简单的东西，通过工具帮我们自动做兼容性处理。**

# 压缩css #

**压缩css需要用到`optimize-css-assets-webpack-plugin`这个插件**

下载插件：

npm install --save-dev optimize-css-assets-webpack-plugin

**这个插件的使用非常简单，引入后直接在`plugins`中new调用即可**

引入插件：

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

在`plugins`中new调用：

// 压缩css
    new OptimizeCssAssetsWebpackPlugin()

这个插件只要调用就可以压缩css，内部的默认配置已经足够将css进行压缩了，所以我们不需要再修改它的配置。

具体配置如下：

const {  resolve } = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
    
    // 设置nodejs环境变量
    // process.env.NODE_ENV = 'development';
    
    module.exports = { 
      entry: './src/js/index.js',
      output: { 
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
      },
      module: { 
        rules: [
          { 
            test: /\.css$/,
            use: [
              MiniCssExtractPlugin.loader,
              'css-loader',
              { 
                loader: 'postcss-loader',
                options: { 
                  ident: 'postcss',
                  plugins: () => [
                    // postcss的插件
                    require('postcss-preset-env')()
                  ]
                }
              }
            ]
          }
        ]
      },
      plugins: [
        new HtmlWebpackPlugin({ 
          template: './src/index.html'
        }),
        new MiniCssExtractPlugin({ 
          filename: 'css/built.css'
        }),
        // 压缩css
        new OptimizeCssAssetsWebpackPlugin()
      ],
      mode: 'development'
    };

打包运行，找到build下的css  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_69_color_FFFFFF_t_70_g_se_x_16]  
**我们发现css整体已经被压缩成一行了**

**压缩后的文件体积为204kb**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16]

这里为了对比，我们注释掉插件的调用，关闭css压缩

// 压缩css
    // new OptimizeCssAssetsWebpackPlugin()

打包运行查看一下结果

没有压缩构建出的css代码：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_41_color_FFFFFF_t_70_g_se_x_16]  
没有压缩构建出的css代码体积：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_21_color_FFFFFF_t_70_g_se_x_16]  
**没有压缩的的css体积大小为273kb，前面压缩后的是204kb，这个压缩的还是比较少的，因为样式不多，总共才14行代码，所以压缩的效果不是特别明显，实际开发中的样式会非常多，那时css压缩后的体积就会非常小，效果很明显。css文件越小，请求速度就会越快，加载速度就会越快，用户看到的效果也会更快一些，用户体验就会更好。所以我们在上线之前一定要给代码压缩**

# js语法检查eslint #

**语法检查最常用的工具就是eslint，在webpack中对应的要使用`eslint-loader`，这个loader依赖`eslint`这个库，也需要下载**

语法检查js文件：

test: /\.js$/,

注意：只检查自己写的源代码，第三方的库是不用检查的，排除`node_modules`：

exclude: /node_modules/,

/* 语法检查： eslint-loader eslint 注意：只检查自己写的源代码，第三方的库是不用检查的 */
     { 
       test: /\.js$/,
       exclude: /node_modules/,
       loader: 'eslint-loader',
       options: { }
     }

**设置检查规则，在`package.json`中`eslintConfig`中设置**

**语法检查规则推荐使用`airbnb`规则，为什么呢？**

我们打开github，在探索中找到`JavaScript`这个主题，下面就是js最受欢迎的仓库了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_68_color_FFFFFF_t_70_g_se_x_16]  
这里可以看到排名第二的是vuejs  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_33_color_FFFFFF_t_70_g_se_x_16]  
第三个是facebook的react  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_32_color_FFFFFF_t_70_g_se_x_16]  
第四个是bootstrap  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_33_color_FFFFFF_t_70_g_se_x_16 1]  
第五个是一本书：你不知道的js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_33_color_FFFFFF_t_70_g_se_x_16 2]  
**第六个就是我们推荐的airbnb这个风格指南**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_33_color_FFFFFF_t_70_g_se_x_16 3]  
airbnb这个风格指南详细的介绍了我们应该怎么写js代码，不应该怎么写js代码，是一个很优秀的库。

我们现在要把这个库应用在eslint上，搜索npm，搜eslint，可以看到一个插件： `eslint-config-airbnb`，这个就是让airbnb风格指南在eslint中生效![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_63_color_FFFFFF_t_70_g_se_x_16]  
airbnb有 `eslint-config-airbnb`和 `eslint-config-airbnb-base`两个插件，其中 `eslint-config-airbnb`会包含react的风格建议，我们现在不写react代码，所以不用这个插件，用`eslint-config-airbnb-base`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_61_color_FFFFFF_t_70_g_se_x_16]  
`eslint-config-airbnb-base`插件又有两个版本，`eslint-config-airbnb-base`（支持ECMAScript 6+）和`eslint-config-airbnb-base/legacy`（仅支持ES5及以下），看到legacy（遗产，传统）这个词了吧，我们当然要使用支持ECMAScript 6+的`eslint-config-airbnb-base`版本啦，从下面的图片能看到我们还需要下载`eslint`和`eslint-plugin-import`这两个库  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_45_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_42_color_FFFFFF_t_70_g_se_x_16]  
下载需要的库和插件：

npm install --save-dev eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import

在`package.json`里的`eslintConfig`中设置检查规则：

**找到`package.json`，在里面加一个字段叫`eslintConfig`，值为一个对象，通过`extends`来继承`airbnb-base`就OK了。**

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_24_color_FFFFFF_t_70_g_se_x_16]

如果要指定配置文件中的环境，请使用`env`键，并通过设置每个环境来指定要启用的环境true。例如，以下启用浏览器和Node.js环境：

{ 
        "env": { 
            "browser": true,
            "node": true
        }
    }

或者在一个package.json文件中

{ 
        "eslintConfig": { 
            "env": { 
                "browser": true,
                "node": true
            }
        }
    }

**配置eslint语法检查后，运行项目会发现后很多代码不规范的，我们一个个去修复会很麻烦，所以我们在配置的时候可以再加一个选项：`fix: true`，自动修复eslint的错误，不用我们手动去改**

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

如果我们在代码里使用console，eslint也会发出警告：不建议使用console  
![在这里插入图片描述][0ca4dbeac53e4317a9cf63294c082be6.png]  
但是我们是为了调试，这里就可以忽略这个规则，有一个选项叫`// eslint-disable-next-line`，就是下一行eslint所有规则都失效（下一行不进行eslint检查）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_34_color_FFFFFF_t_70_g_se_x_16]  
写法就是在需要忽略的代码上面写一行`// eslint-disable-next-line`，跟注释的写法一样

这样重新打包运行就不会再有警告了。

**最终配置：**

const {  resolve } = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = { 
      entry: './src/js/index.js',
      output: { 
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
      },
      module: { 
        rules: [
          /* 语法检查： eslint-loader eslint 注意：只检查自己写的源代码，第三方的库是不用检查的 设置检查规则： package.json中eslintConfig中设置~ "eslintConfig": { "extends": "airbnb-base" } airbnb --> eslint-config-airbnb-base eslint-plugin-import eslint */
          { 
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'eslint-loader',
            options: { 
              // 自动修复eslint的错误
              fix: true
            }
          }
        ]
      },
      plugins: [
        new HtmlWebpackPlugin({ 
          template: './src/index.html'
        })
      ],
      mode: 'development'
    };

package.json

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

# js兼容性处理bable、core-js #

先做个测试，写一些es6的语法

const add = (x, y) => { 
      return x + y;
    };
    console.log(add(2, 5));

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_44_color_FFFFFF_t_70_g_se_x_16]  
使用webpack的内置配置看一下效果

const {  resolve } = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = { 
      entry: './src/js/index.js',
      output: { 
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
      },
      module: { 
        rules: []
      },
      plugins: [
        new HtmlWebpackPlugin({ 
          template: './src/index.html'
        })
      ],
      mode: 'development'
    };

打包运行后，看built.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_68_color_FFFFFF_t_70_g_se_x_16 1]  
**可以发现webpack的内置配置是没有做兼容性处理的，正常我们打开chrome浏览器是没有问题的，输出结果是正常的**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_69_color_FFFFFF_t_70_g_se_x_16 1]

**但是要注意，一旦我们打开ie浏览器就会报语法错误，因为它根本不认识这些语法**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_65_color_FFFFFF_t_70_g_se_x_16]  
所以我们就必然需要做兼容性处理

**做兼容性处理需要用到`bable`，在webpack中对应使用`bable-loader`，使用时我们需要做具体的配置，有一个参数叫`presets`预设：指示babel做怎么样的兼容性处理，默认情况下我们会传入`'@babel/preset-env'`，这样相当于做一个预设环境的兼容性处理，一个非常基本的兼容性处理**

{ 
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: { 
            // 预设：指示babel做怎么样的兼容性处理
            presets: ['@babel/preset-env']
        }
    }

下载需要的插件：

npm install --save-dev babel-loader @babel/core @babel/preset-env

以上面的兼容性配置打包运行，打开built.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_66_color_FFFFFF_t_70_g_se_x_16]  
**我们发现此时的es6语法已经做了兼容性处理**

刷新查看ie浏览器效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_49_color_FFFFFF_t_70_g_se_x_16]  
结果打印出来了，正常显示。**此时我们已经有了基本的兼容性处理。**

**为什么说只是有了基本的兼容性处理呢？是因为在开发过程中的兼容性问题不止上面这些，比如说我们写一个`Promise`，上面的配置能够处理吗？**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_44_color_FFFFFF_t_70_g_se_x_16 1]  
以前面的配置打包运行，查看built.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_64_color_FFFFFF_t_70_g_se_x_16]  
看到这个`Promise`还是原封不动的`promise`，只有有箭头函数做了兼容性处理（基础的兼容性配置做的处理）

刷新查看ie浏览器效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_50_color_FFFFFF_t_70_g_se_x_16]  
ie浏览器报错：`promise未定义`

总结这种方法：

**基本的js兼容性处理 --> `@babel/preset-env`，存在的问题：只能转换基本语法，如promise高级语法不能转换**。

所以我们就要解决这个兼容性问题

**第二种解决方法：做全部js兼容性处理 --> `@babel/polyfill`**

下载`@babel/polyfill`这个库

npm i @babel/polyfill -D

**这个不是bable插件，下载之后只需引入即可**

比如直接在js代码里用`import`引入

import '@babel/polyfill';

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_33_color_FFFFFF_t_70_g_se_x_16 4]  
引入后我们再来构建一次

**刷新ie浏览器，查看效果，可以发现ie浏览器正常运行打印了**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_54_color_FFFFFF_t_70_g_se_x_16]  
**下面我们看这第二种做全部兼容性处理的方法有什么问题：**

**之前构建的代码体积为4kb**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_31_color_FFFFFF_t_70_g_se_x_16]  
**现在我们通过`import '@babel/polyfill'`，引入这个库后打包的代码体积为441kb**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_33_color_FFFFFF_t_70_g_se_x_16 5]  
**查看built.js可以发现，里面包含了各式各样的兼容性处理，总结一下就是，`@babel/polyfill`这个库会把js全部的兼容性处理纳进来，不管你做什么兼容性，它一次性全部搞定**

> 相当于我饿了，只需要吃一顿饭，它却把一年内的粮食都运进来

**`@babel/polyfill`是怎么做的呢？其实它就是把那些浏览器不识别的方法，全部定义好，直接挂载在对应的顶层对象上，这样不管它识不识别你都可以直接用了。所以这种是一种相对比较暴力的解决方式。**

总结第二种方法：

**全部js兼容性处理 --> `@babel/polyfill` ，存在的问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~**

**第三种解决方法：需要做兼容性处理的就做：按需加载 --> `core-js`**

下载`core-js`:

npm i core-js -D

配置`core-js`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_27_color_FFFFFF_t_70_g_se_x_16]  
**如上图，我们稍微改动一下`presets`参数的写法，给`'@babel/polyfill'`外再套个数组，在下面写相应的配置：**

{ 
       test: /\.js$/,
       exclude: /node_modules/,
       loader: 'babel-loader',
       options: { 
         // 预设：指示babel做怎么样的兼容性处理
         presets: [
           [
             '@babel/preset-env',
             { 
               // 按需加载
               useBuiltIns: 'usage',
               // 指定core-js版本
               corejs: { 
                 version: 3
               },
               // 指定兼容性做到哪个版本浏览器
               targets: { 
                 chrome: '60',
                 firefox: '60',
                 ie: '9',
                 safari: '10',
                 edge: '17'
               }
             }
           ]
         ]
       }
    }

上面就是我们第三种方案的配置，要注意，使用第三种方案就不能再使用第二种方案，所以要把前面引入的`import '@babel/polyfill';`注释掉：

// import '@babel/polyfill';

**再次打包运行，我们发现代码的体积更小了，只有104kb**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_33_color_FFFFFF_t_70_g_se_x_16 6]  
**总结一下**

**js兼容性处理：babel-loader @babel/core**

1.  **基本js兼容性处理 --> @babel/preset-env**  
    **问题：只能转换基本语法，如promise高级语法不能转换**
2.  **全部js兼容性处理 --> @babel/polyfill**  
    **问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~**
3.  **需要做兼容性处理的就做：按需加载 --> core-js**

**js兼容性处理的最终配置（按需加载core-js）：**

const {  resolve } = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = { 
      entry: './src/js/index.js',
      output: { 
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
      },
      module: { 
        rules: [
          /* js兼容性处理：babel-loader @babel/core 1. 基本js兼容性处理 --> @babel/preset-env 问题：只能转换基本语法，如promise高级语法不能转换 2. 全部js兼容性处理 --> @babel/polyfill 问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~ 3. 需要做兼容性处理的就做：按需加载 --> core-js */  
          { 
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: { 
              // 预设：指示babel做怎么样的兼容性处理
              presets: [
                [
                  '@babel/preset-env',
                  { 
                    // 按需加载
                    useBuiltIns: 'usage',
                    // 指定core-js版本
                    corejs: { 
                      version: 3
                    },
                    // 指定兼容性做到哪个版本浏览器
                    targets: { 
                      chrome: '60',
                      firefox: '60',
                      ie: '9',
                      safari: '10',
                      edge: '17'
                    }
                  }
                ]
              ]
            }
          }
        ]
      },
      plugins: [
        new HtmlWebpackPlugin({ 
          template: './src/index.html'
        })
      ],
      mode: 'development'
    };

# js压缩 #

**js压缩非常简单，只需要把`mode`改为`production`，即生产环境下webpack会自动压缩代码。**

**生产环境下webpack会加载一些不一样的配置，加载了很多插件，其中`UglifyJsPlugin`这个插件就会去压缩js代码，所以我们就不需要自己去写插件了，webpack内部已经实现好了**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_35_color_FFFFFF_t_70_g_se_x_16]  
我们用一个最基础的webpack配置，修改`mode`改为`production`，测试一下效果

mode: 'production'
    };

实例项目的js代码：

打包运行后的built.js代码：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_54_color_FFFFFF_t_70_g_se_x_16 1]  
**可以看到代码已经压缩成一行了，js压缩搞定**

# 压缩html #

> 前面我们给css和js都做了兼容性处理，html要不要做兼容性处理呢？答案是不需要，html是没办法做兼容性处理的，它的标签认识就是认识，不认识就是不认识，所以html是不需要做兼容性处理的。**我们只需要对html代码进行压缩。**

**通过`HtmlWebpackPlugin`对html代码进行压缩，`HtmlWebpackPlugin`插件配置中有一个选项叫`minify`，使用这个选项做html压缩。**

**配置如下：**

const {  resolve } = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = { 
      entry: './src/js/index.js',
      output: { 
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
      },
      plugins: [
        new HtmlWebpackPlugin({ 
          template: './src/index.html',
          // 压缩html代码
          minify: { 
            // 移除空格
            collapseWhitespace: true,
            // 移除注释
            removeComments: true
          }
        })
      ],
      mode: 'production'
    };

# 生产环境配置总结——一个完整的开发环境配置 #

**1.代码复用**

前面css文件做的配置，对于less文件我们也需要做：

{ 
        test: /\.less$/,
        use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            { 
                // 还需要在package.json中定义browserslist
                loader: 'postcss-loader',
                options: { 
                    ident: 'postcss',
                    plugins: () => [require('postcss-preset-env')()]
                }
            },
            'less-loader'
        ]
    },

**可以发现对less文件使用的后三个loader，css文件也使用了，所以这里我们就可以复用一下**

**提取公用的loader：**

// 复用loader
    const commonCssLoader = [
      MiniCssExtractPlugin.loader,
      'css-loader',
      { 
        // 还需要在package.json中定义browserslist
        loader: 'postcss-loader',
        options: { 
          ident: 'postcss',
          plugins: () => [require('postcss-preset-env')()]
        }
      }
    ];

**用扩展运算符展开：**

{ 
        test: /\.css$/,
        use: [...commonCssLoader]
      },
      { 
        test: /\.less$/,
        use: [...commonCssLoader, 'less-loader']
      },

这样就不用去写太多重复代码，代码更加精简一些。

**2.指定loader执行的先后顺序**

**正常来讲，一个文件只能被一个loader处理。当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序。**

**对于js文件loader执行的先后顺序：先执行eslint 在执行babel**

**通过对loader设置`enforce`属性指定该loader优先执行：**

// 优先执行
    enforce: 'pre',

/* 正常来讲，一个文件只能被一个loader处理。 当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序： 先执行eslint 在执行babel */
      { 
        // 在package.json中eslintConfig --> airbnb
        test: /\.js$/,
        exclude: /node_modules/,
        // 优先执行
        enforce: 'pre',
        loader: 'eslint-loader',
        options: { 
          fix: true
        }
      },
      { 
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: { 
          presets: [
            [
              '@babel/preset-env',
              { 
                useBuiltIns: 'usage',
                corejs: { version: 3},
                targets: { 
                  chrome: '60',
                  firefox: '50'
                }
              }
            ]
          ]
        }
      },

**3.一个完整的生产环境配置**

const {  resolve } = require('path');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    // 定义nodejs环境变量：决定使用browserslist的哪个环境
    process.env.NODE_ENV = 'production';
    
    // 复用loader
    const commonCssLoader = [
      MiniCssExtractPlugin.loader,
      'css-loader',
      { 
        // 还需要在package.json中定义browserslist
        loader: 'postcss-loader',
        options: { 
          ident: 'postcss',
          plugins: () => [require('postcss-preset-env')()]
        }
      }
    ];
    
    module.exports = { 
      entry: './src/js/index.js',
      output: { 
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
      },
      module: { 
        rules: [
          { 
            test: /\.css$/,
            use: [...commonCssLoader]
          },
          { 
            test: /\.less$/,
            use: [...commonCssLoader, 'less-loader']
          },
          /* 正常来讲，一个文件只能被一个loader处理。 当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序： 先执行eslint 在执行babel */
          { 
            // 在package.json中eslintConfig --> airbnb
            test: /\.js$/,
            exclude: /node_modules/,
            // 优先执行
            enforce: 'pre',
            loader: 'eslint-loader',
            options: { 
              fix: true
            }
          },
          { 
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: { 
              presets: [
                [
                  '@babel/preset-env',
                  { 
                    useBuiltIns: 'usage',
                    corejs: { version: 3},
                    targets: { 
                      chrome: '60',
                      firefox: '50'
                    }
                  }
                ]
              ]
            }
          },
          { 
            test: /\.(jpg|png|gif)/,
            loader: 'url-loader',
            options: { 
              limit: 8 * 1024,
              name: '[hash:10].[ext]',
              outputPath: 'imgs',
              esModule: false
            }
          },
          { 
            test: /\.html$/,
            loader: 'html-loader'
          },
          { 
            exclude: /\.(js|css|less|html|jpg|png|gif)/,
            loader: 'file-loader',
            options: { 
              outputPath: 'media'
            }
          }
        ]
      },
      plugins: [
        new MiniCssExtractPlugin({ 
          filename: 'css/built.css'
        }),
        new OptimizeCssAssetsWebpackPlugin(),
        new HtmlWebpackPlugin({ 
          template: './src/index.html',
          minify: { 
            collapseWhitespace: true,
            removeComments: true
          }
        })
      ],
      mode: 'production'
    };

# 参考 #

*  https://www.bilibili.com/video/BV1e7411j7T5?p=15&spm\_id\_from=pageDriver

[Webpack _9_ -]: https://blog.csdn.net/weixin_45844049/article/details/120065367
[Webpack _8_ - PWA]: https://blog.csdn.net/weixin_45844049/article/details/120063411
[Webpack _7_ -]: https://blog.csdn.net/weixin_45844049/article/details/120048999
[Webpack _6_ - code splitting _ bundle]: https://blog.csdn.net/weixin_45844049/article/details/120044485
[Webpack _5_ - tree shaking]: https://blog.csdn.net/weixin_45844049/article/details/120043245
[Webpack _4_ - _ _bable]: https://blog.csdn.net/weixin_45844049/article/details/120022585
[Webpack _3_ - oneOf]: https://blog.csdn.net/weixin_45844049/article/details/120008581
[Webpack _2_ - source-map]: https://blog.csdn.net/weixin_45844049/article/details/120002385
[Webpack _1_ - HMR]: https://blog.csdn.net/weixin_45844049/article/details/119982759
[Webpack _html_devServer]: https://blog.csdn.net/weixin_45844049/article/details/119718436
[Webpack]: https://blog.csdn.net/weixin_45844049/article/details/119452096
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70]: /images/20220829/b689c4a5bd1c4d0d941269f23890f992.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 1]: /images/20220829/d776da4a691948c2afdd1018a33e2dac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 2]: /images/20220829/b55987d1b2e64cdc99fcf6220726a42a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 3]: /images/20220829/90570e3389344c5da9daa2d9aa0e240d.png
[08938ed9496b4fc29924260fe310fa44.png]: /images/20220829/92772b91d6f84ed2b5aa0b195ef6a5cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 4]: /images/20220829/2e9781d95b604d059163dd4cb0fca022.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 5]: /images/20220829/2de7311615b445e88bb4a4a28425e2d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 6]: /images/20220829/0e518fede7fa406a8abdeedc966b9e0c.png
[be2001a55b5d4eecbc30dcea73f1e167.png]: /images/20220829/a5f5eabc009c4ba68e414d02a225926c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 7]: /images/20220829/1dc09dbd53804cdd95c73962f5e085db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 8]: /images/20220829/fe8e80282888451cb2a07989819edc4d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 9]: /images/20220829/acb609bc165b4fd9871cd35de489053d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 10]: /images/20220829/009cc3d72df540108d745ee0881538ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 11]: /images/20220829/beef1b2754324e22accf1ad819e82f23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 12]: /images/20220829/c98ac3acaa154371aa8f46c68939a34a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_69_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/f51280a9afab438a8afb79a305953c76.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/537b5563f2ce4242baaadc8fc3c45a06.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_41_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/e64334cf16a74fdc97dfd57754e6f974.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_21_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/d7f2df6c54294888be14967908f719fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_68_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/0e4a4ed43d4a4c04945452777fb70891.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_33_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/89f3f8623687447c90b97ea737feeaaa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_32_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/8b636ca3bd5c4c78a51c231c64d2e41b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_33_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/7bed7664de654694a0ed5caacc3e3a1b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_33_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/d0c87007fda643fb8d7860d0e444476d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_33_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/723d38efc5a64e78a0c41f7831959336.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_63_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/bbdd20871c5848fb87625b4f3505479f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_61_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/7bfdae655c6f4a41a4b88c1f1494d5ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_45_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/eca943fb38844fd0bb797fdc7c03985a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_42_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/d7a9a655497f405cb4d53f19e6283ddc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_24_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/678683e16267424f90166da870db154b.png
[0ca4dbeac53e4317a9cf63294c082be6.png]: /images/20220829/9adbc9e8a9ac42719d957cc49f76f1cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_34_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/50a0a19111324449b82f22f7d463170c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_44_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/a9bbb2df338041f994b3ca1fc97660ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_68_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/2675bd16abe64e5fab19af826250b804.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_69_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/be56fc2076254f7090b15e5649c8310e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_65_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/bfd6e129609142a4935ac7fb4bf79ce8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_66_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/296f482b7e9c4f92a253167b456a7dd7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_49_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/28f06e009be840628200798a3b0f7612.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_44_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/31674986c9bc424c8ea753202ffac825.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_64_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/d152aaa8a1034656beaa8ef3aa4f9ec1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_50_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/713b5023e09b4009835b95de786cefcf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_33_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220829/bb6f23e5bbf74cb597a5f5e8bd78498d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_54_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/836a378c7d314c718587345d08a46219.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_31_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/602ecd3452a14d8ea923e10d75ff9aba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_33_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220829/057f30095cb546b7a5e08d850b35095b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_27_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/a8d2da00d0864f0dbc5bb2b6aa028774.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_33_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220829/c284821b35da4ff4b14d143ac3ca6c62.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_35_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/aaa3fa50284c44c4b22cb2f1224dbbde.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA5ZyG5ZyGMDE_size_54_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/009093fa406d4261b89eccaad2178dbc.png