vue2_wepack_demo

项目创建

npm install vue-cli -g  
vue create vue2_weback_demo

vue create 和vue init 两种创建方式的区别

vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档。

使用方式：vue create 项目名称

vue init vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录(如果修改了配置，可以查看文档，用cli3的方法进行配置)

webpack是官方推荐的标准模板名使用方式：vue init webpack 项目名称

使用方式：vue init simulatedgreg/electron-vue 项目名称

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

webpack配置

npm install webpack webpack-cli -D
npm install webpack-dev-server -D

webpack.config.js 初始化配置是参考B栈视频学习整理的，有兴趣的小伙伴也可以看一下，话不多说，下面进入配置参考视频

初级配置

1、配置入口和出口文件

module.exports = {
  // 也可以配置为一个数组，配置多入口
  entry: './src/main.js',
  mode: "development",
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
}

2、配置loader

页面有各种语言，css、js、less等，要配置解析器让webpack打包的时候能够识别他，解析成浏览器识别的语法。

// 用来处理获取的样式
function getStyleLoaders(pre) {
  return [MiniCssExtractPlugin.loader,
    "css-loader",
  {
    loader: "postcss-loader",
    options: {
      postcssOptions: {
        // plugins: [["autoprefixer"]],
        plugins: ['postcss-preset-env'],//能解决大多数兼容性问题
      },
    },
  }, pre].filter(Boolean);
}
  module: {
    rules: [
      { test: /\.css$/,// 匹配的条件
         use: [
          // 通过style标签动态插入style标签
          'style-loader', 
          // 把css代码转化为js代码，css-loader是处理css文件的loader
          'css-loader'
        ] }，
         {
            test: /\.less$/,
            use: getStyleLoaders("less-loader"), // 从右向左解析原则
            // use: ["style-loader", "css-loader", "less-loader"]
          },
          {
            test: /\.s[ac]ss$/,
            use: getStyleLoaders("sass-loader")
          },
            {
            test: /\.js$/,
            exclude: /node_modules/,
            use: [
            {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env'],
                // cacheDirectory: true, // 开启babel缓存
                // cacheCompression: false,// 关闭缓存文件压缩
                // plugins: ['@babel/plugin-transform-runtime'],
              },
            },]
          },
           {
            test: /\.(gif|png|jpe?g)$/i,
            type: "asset",
            parser: {
              dataUrlCondition: {
                // 小于10kb的图片转成base64，减少请求数量
                // 缺点：体积会大一点
                maxSize: 10 * 1024, // 小于10kb
              },
            },
            generator: {
              // 输出图片的名称
              filename: "imgs/[name].[contenthash:8][ext]",
            },
          },
          {
            test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, //媒体文件
            // 对文件原封不动的输出
            type: "asset/resource",
            // generator: {
            //   filename: "media/[name].[contenthash:8][ext]",
            // },
          },
          {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i, // 字体
            type: "asset/resource",
            // generator: {
            //   filename: "fonts/[name].[contenthash:8][ext]"
            // }
          },
    ]
  },

3、配置eslint（可组装js、jsx检查工具）

我们打包前，要先保证代码正确，这个时候就用到了eslint 配置文件由很多种写法: .eslintrc.*:新建文件，位于项目根目录 .eslintrc .eslintrc.js .eslintrc.json 区别在于配置格式不一样 package.json 中eslintconfig:不需要创建文件，在原有文件基础上写ESLint 会查找和自动读取它们，所以以上配置文件只需要存在一个即可

在webpack4中是loder在webpack5中改为plugin

npm install eslint-webpack-plugin eslint --save-dev

我的代码里面配置@vue/cli-plugin-eslint 所以不用安装上面这个步骤 -- 参考链接webpack官网 plugin配置 webpack官网

配置eslint-webpack-plugin

下载

npm install eslint-webpack-plugin --D

引入

const ESLintPlugin = require('eslint-webpack-plugin');

3、在plugins中配置

plugins:[
...
 new ESLintPlugin({
      // 配置哪些目录需要检查
      context: path.resolve(__dirname, './src'),
    }),
]

在.eslintrc.*s中配置eslint规则

// 继承eslint规则
extends:["eslint:recommended"]
env :{
  "node":true，//启用node中全局变量
  "browser":true，//启用浏览器中全局变量
}
parserOptions:{
  "ecmaVersion":6, //使用es6语法
  "sourceType": "module" //使用模块化语法
}
rules:{
  "no-var":2，//不能使用 var 定义变量
}

在根目录配置文件.eslintignore中配置忽略检查的文件

dist

4、配置babel（将高级的js语法转换成低版本的js语法）

配置好eslint之后，就是要配置babel，他能将高级的js语法转换成低版本的js语法，处理各种兼容问题。

配置文件配置文件由很多种写法:

babel.config.*:新建文件，位于项目根目录
babel.config.js
babel.config.json .babelrc.*:新建文件，位于项目根目录
.babelrc
.babelrc.is
.babelrc.json package.json 中babel:不需要创建文件，在原有文件基础上写 Babel会查找和自动读取它们，所以以上配置文件只需要存在一个即可

presets 预设简单理解:就是一组 Babel插件,扩展 babel 功能

@babel/preset-env : 一个智能预设允计您使用最新的JavaScript。
@babel/preset-react：一个用来编译 React jsx 语法的预设
@babe1/preset-typescript :一个用来编译TypeScript 语法的预设

在 Webpack 中使用 1.下载包

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

我安装babel已包含上述插件，无需再安装

babel官网配置 2. 在webpack中配置babel

module:{
  {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
}

在babel.config.js中配置babel

module.exports = {
  // 智能预设能编译最新的es6
  presets: ['@babel/preset-env'],
};

对于js来说何时用babel-loader何时用esbuild-loader

主要功能：通过 Babel 转译 JavaScript 代码，支持 ES6+ 语法转换为兼容性更高的代码。灵活性：支持多种插件和预设（如 @babel/preset-env、@babel/plugin-transform-runtime 等），可以满足复杂的转译需求。

生态丰富：Babel 的插件生态系统非常强大，能够处理各种语言特性（如 TypeScript、Flow 等）。

速度较慢：由于 Babel 是基于 JavaScript 实现的，转译速度相对较慢，尤其是在大规模项目中。使用场景

当需要对现代 JavaScript 语法进行深度转译时（如支持 IE 浏览器）。

当需要使用 Babel 插件来实现特定功能时（如 polyfill、代码优化等）。 esbuild-loader 特点

主要功能：通过 esbuild 工具快速转译 JavaScript 代码，专注于性能优化。

速度快：esbuild 是用 Go 语言编写的，转译速度远快于 Babel。

简单易用：默认支持 ES6+ 语法转译，无需额外配置插件或预设。

功能有限：相比 Babel，esbuild 的功能较为单一，不支持复杂的插件系统。使用场景

当项目对转译速度有较高要求时（如开发环境中的热更新）。

当只需要简单的 ES6+ 语法转译，而不需要复杂的功能（如 polyfill 或特定插件）

我当前项目是vue2+webpack 所以用的是esbuild-loader

5、使用 html-webpack-plugin

html-webpack-plugin 是一个用于在 webpack 的构建过程中生成 HTML 文件的插件。它允许您使用一个简单的模板文件，并自动将生成的 bundle 文件插入到模板文件中，从而生成一个完整的 HTML 文件。使用方式如下：

  new HtmlWebpackPlugin({
      // 模版：以public/index.html为模板生成打包后的index.html
      template: path.resolve(__dirname, "./public/index.html"),
      BASE_URL: process.env.BASE_URL || '/'
    }),

配置服务热更新

下载依赖

npm install wwebpack-dev-server --D

在webpack.config.js中配置devServer

  devServer: {
    static: {
      directory: path.resolve(__dirname, "./dist"), // 打包后的文件路径 directory:目录
    },
    open: true, //自动打开浏览器
    compress: true, //启动gzip压缩
    port: 9000, // 端口号
  },

启动命令： npx webpack serve

6、 css优化 MiniCssExtractPlugin

本插件会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。

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

将style-loder 替换为 MiniCssExtractPlugin.loader

    {
        test: /\.css$/,
        // MiniCssExtractPlugin.loader 最终会将css提取到单独的文件
        use: [MiniCssExtractPlugin.loader, "css-loader"], // 从右向左解析原则
        // use: ["style-loader", "css-loader"]
      }

然后在插件中调用一下

 new MiniCssExtractPlugin({
      filename: "css/[name].[contenthash:8].css"
    }),

7、css兼容性处理

安装

npm i postcss-loader postcss postcss-preset-env -D

在loader中配置

    {
        test: /\.s[ac]ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
             plugins:['postcss-preset-env'],//能解决大多数兼容性问题
              postcssOptions: {
                plugins: [["autoprefixer"]],
              },
            },
          },
          "sass-loader",
        ], // scss的loader
      },

在package.json中配置browserslist

  "browserslist": [
    "> 1%", // 全球超过1%的浏览器
    "last 2 versions", // 最近两个版本
    "not dead" // 排除已经不再维护的浏览器
  ]

7、CssMinimizerWebpackPlugin

CssMinimizerWebpackPlugin 是一个用于优化和压缩 CSS 的 webpack 插件。它使用 cssnano 来优化和压缩 CSS，并支持 source maps 和 assets 中使用查询字符串。

安装依赖

npm install css-minimizer-webpack-plugin --save-dev

webpack官方给出的代码

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /.s?css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
    ],
  },
  optimization: {
    minimizer: [
      // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
      // `...`,
      new CssMinimizerPlugin(),
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};

我直接在plugins中配置了CssMinimizerPlugin

8、启动常见问题处理

 ERROR in Template execution failed: ReferenceError: BASE URL is not defined
 ERROR in ReferenceError: BASE URL is not defined

  plugins: [
  ...
    new DefinePlugin({
      // window.ENV = 'production'
      ENV: JSON.stringify('production'),
      BASE_URL: '"../"' // 定义全局变量BASE_URL
    }),
  ],

webpack 高级配置见下篇

[项目地址] (https://gitee.com/pear66/vue-webpack5)

webpack 高级配置

总结

我们从 4 个角度对 webpack 和代码进行了优化:

1.提升开发体验。使用 sourceMap让开发或上线时代码报错能有更加准确的错误提示。
2.提升 webpack 提升打包构建速度。使用 HotmduleReplacement让开发时只重新编译打包更新变化了的代码，不变的代码使用缓存，从而使更新速度更快。。使用 0ne0f让资源文件一旦被某个 loader 处理了，就不会继续遍历了，打包速度更快。。使用 Include/Exclude排除或只检测某些文件，处理的文件更少，速度更快。。使用cache 对 eslint 和 babel 处理的结果进行缓存，让第二次打包速度更快。。使用 Thead 多进程处理 esint和 babel 任务，速度更快。(需要注意的是，进程启动通信都有开销的，要在比较多代码处理时使用才有效果)
3.减少代码体积。使用 Tree shaking剔除了没有使用的多余代码，让代码体积更小。。使用 @babel/plugin-transform-runtime 插件对 babel 进行处理，让辅助代码从中引入，而不是每个文件都生成辅助代码，从而体积更小。。使用 image miniizer 对项目中图片进行压缩，体积更小，请求速度更快。(需要注意的是，如果项目中图片都是在线链接，那么就不需要了。本地项目静态图片才需要进行压缩。)
4.优化代码运行性能。使用 code split 对代码进行分割成多个i5文件，从而便单个文件体积更小，并行加载is速度更快。并通过 import 动态导入语法进行按需加载，从而达到需要使用时才加载该资源，不用时不加载资源。使用 Preload/Prefetch,对代码进行提前加载，等未来需要使用时就能直接使用，从而用户体验更好。使用 Network cache能对输出资源文件进行更好的命名，将来好做缓存，从而用户体验更好。。便用 core-js 对js 进行兼容性处理，让我们代码能运行在低版本浏览器。。使用PA能让代码离线也能访问，从而提升用户体验。

devtool 配置 (找到报错位置)

此选项控制是否生成，以及如何生成 source map。使用 SourceMapDevToolPlugin 进行更细粒度的配置。查看 source-map-loader 来处理已有的 source map。 SourceMap(源代码映射)是一个用来生成源代码与构建后代码--映射的文件的方案。它会生成一个 xx.map 文件，里面包含源代码和构建后代码每一行、每一列的映射关系。当构建后代码出错了，会通过 xxx.map 文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，帮助我们更快的找到错误根源。开发模式用

  devtool: 'cheap-module-source-map',

优点:打包编译速度快，只包含行映射
缺点:没有列映射生产模式用

devtool: 'source-map',

优点:包含行/列映射
缺点:打包编译速度更慢 build: slowest rebuild: slowest

优化打包速度

HMR (HotModuleReplacement)，即热模块替换，是 webpack 的一个功能，它可以在运行时更新模块，而无需完全刷新整个页面。

  devServer: {
    ...
    hot:true, // 提供HMR功能,只更新某个模块，没有替换整个项目
  },

在模块中判断

if(module.hot){
  module.hot.accept('./xxx')
}

实际开发并不需要上述这样，直接配置loader，以vule为例 vue-loader，生产模式不需要

OneOf 每个文件只被一个loader处理

  module: {
    rules: [
      // oneOf 不支持 vue-loader ，要单独拿出来
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      // 每个文件只有一个loader配置处理
      {
        oneOf: [
        {
          test: /\.(gif|png|jpe?g)$/i,
          type: "asset",
          parser: {
            dataUrlCondition: {
              // 小于10kb的图片转成base64，减少请求数量
              // 缺点：体积会大一点
              maxSize: 10 * 1024, // 小于10kb
            },
          },
          generator: {
            // 输出图片的名称
            filename: "imgs/[name].[contenthash:8][ext]",
          },
        },
       ]
      }
    ],
  },

报错 [VueLoaderPlugin Error] vue-loader 15 currently does not support vue rules with oneof 解决方案：将vue-loader 移到配置外面，单独拿出来

include/exclude 处理某些文件或者排除某些文件

 module: {
   rules: [
   {
            test: /\.(js|ts|jsx|tsx)$/,
            include: path.resolve(__dirname, 'src'),
            // exclude: /node_modules/,
            // loader:"babel-loader",
            loader: 'esbuild-loader',
            generator: {
              target: 'es2015'
            }
          },
   ]
 }

include和exclude的只写一个即可

 plugins: [
  new ESLintPlugin({
      // 配置哪些目录需要检查
      context: path.resolve(__dirname, './src'),
      exclude: 'node_modules',// 不写 默认也有
    }),
 ]

cache 缓存（提升后面几次的打包速度）

对eslint检查和babel编译进行缓存，提升打包速度

       {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env'],
                cacheDirectory: true, // 开启babel缓存
                cacheCompression: false,// 关闭缓存文件压缩
              },
            },
          },

eslint 开启缓存

    new ESLintPlugin({
      // 配置哪些目录需要检查
      context: path.resolve(__dirname, './src'),
      exclude: 'node_modules',// 不写 默认也有
      cache: true,// 开启缓存
      cacheLocation: path.resolve(__dirname, '../node_modules/.cache/eslintcache'),
    }),

多进程打包

const os = require('os');
const threads = os.cpus().length;

下载 thread-loader

npm install thread-loader --D

在loader配置多进程

       {
          test: /\.js$/,
          exclude: /node_modules/,
          use: [{
            loader: 'thread-loader',
            options: {
              workers: threads, // 开启几个子进程去完成
            }
          },
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
              cacheDirectory: true, // 开启babel缓存
              cacheCompression: false,// 关闭缓存文件压缩
            },
          },] 
        },

在eslint中开启多进程

  new ESLintPlugin({
      // 配置哪些目录需要检查
      context: path.resolve(__dirname, './src'),
       cache: true,// 开启缓存
       cacheLocation: path.resolve(__dirname, '../node_modules/.cache/eslintcache'),
       threads,
    }),

引入压缩的插件

const TerserWebpackPlugin = require("terser-webpack-plugin");

在plugins中配置

   new TerserWebpackPlugin({
      parallel: threads, // 开启多进程
      extractComments: false, // 移除注释
      terserOptions: {
        compress: {
          pure_funcs: ['console.log'], // 移除console.log
        },
      },
    }),

在optimization添加压缩配置

  // 用于处理压缩
  optimization: {
   ...
    minimizer: [
      // CssMinimizerPlugin、TerserWebpackPlugin 也可以放在plugins中
      new CssMinimizerPlugin(),
      new TerserWebpackPlugin({
        parallel: threads, // 开启多进程
        extractComments: false, // 移除注释
        terserOptions: {
          compress: {
            pure_funcs: ['console.log'], // 移除console.log
          },
        },
      }),
    ],
  },

减少代码体积 Tree Shaking

减少babel体积

下载禁用babel自动对每个文件的runtime注入，而是引入@babel/plugin-transform-runtime 是辅助代码从这里引入

npm i @babel/plugin-transform-runtime --D

在babel中配置

          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: [{
              loader: 'thread-loader',
              options: {
                workers: threads, // 开启几个子进程去完成
              }
            },
            {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env'],
                cacheDirectory: true, // 开启babel缓存
                cacheCompression: false,// 关闭缓存文件压缩
                plugins: ['@babel/plugin-transform-runtime'],
              },
            },]
          },

压缩图片

下载包

npm i image-minimizer-webpack-plugin --D

无损压缩(包下载不下来)

npm install imagemin-gifsicle  imagemin-jpegtran imagemin-optipng imagemin-svgo --D

有损压缩

npm install imagemin-gifsicle imagemin-jpegtran imagemin-pngquant imagemin-svgo --D

包不好下

  optimization: {
   ...
    minimizer: [
    ...
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.imageminGenerate,
          options: {
            plugins: [
              ['gifsicle', { interlaced: true }],
              ['jpegtran', { progressive: true }],
              ['optipng', { optimizationLevel: 5 }],
              [
                'svgo',
                {
                  plugins: [
                    'preset-default',
                    "prefixIds",
                    {
                      name: "sortAttrs",
                      params: {
                        xmlnsOrder: "alphabetical"
                      }
                    }

                  ]
                },
              ],
            ]
          }
        }
      })
    ],
  },

多入口

const HtmlWebpackPlugin=require("html-webpack-plugin");
module.exports ={

  // entry:'./src/main.js'，// 只有一个入口文件，单入口
  entry:{ // 有多个入口文件，多入口
      app:"./src/app.js"
      main:"./src/main.js"
    }
    output:{
      path: path.resolve( dirname,"dist"),
      filename: "[name].js"，// webpack命名方式，[name]以文件名自己命名filename 
  }
  plugins:[
    new HtmlWebpackPlugin({template:path.resolve( dirname,"public/index.html")})
  ],
  mode:"production"
}

多入口想提取公共模块，这个时候就用到了代码分割

  optimization: {
    minimize: true, // 强制启用压缩
    // 对代码进行分割
    splitChunks: {
      chunks: 'all',
      // 以下是默认值
      // minsize:20000，//分割代码最小的大小
      // minRemainingsize:0，//类似于minsize，最后确保提取的文件大小不能为0// minChunks:1，//至少被引用的次数，满足条件才会代码分割
      // maxAsyncRequests:3e,/按需加载时并行加载的文件的最大数量
      // maxInitialRequests:30，//入口js文件最大并行请求数量
      // enforcesizeThreshold:50000,
      // 超过50kb一定会单独打包(此时会忽略minRemainingsize、maxAsyncRequests、maxInitialRegquests)
      //cacheGroups:{// 组，哪些模块要打包到一个组)
      // defaultVendors:{//组名
      // test:/[\V/]node_modules[\\/]/，//需要打包到一起的模块
      // priority:-10，//权重(越大越高)
      //  reuseExistingchunk:true，//如果当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用，
      // 而不是生成新的模块
      // },
      // default:{ // 其他没有写的配置会使用上面的默认值
      // {
      //   minChunks:2,//这里的minChunks权重更大
      //   priority: -20,
      //   reuseExistingchunk: true,
      // }

    },
    // runtimeChunk: 'single',
    minimizer: [
      new CssMinimizerPlugin(),
    ]
  },

chunk统一命名

  output: {
    clean: true, // 清理 /dist 文件夹
    // filename: "js/main.js", // 打包后的文件名称
    filename: "js/[name].[contenthash:8].js", // 打包后的文件名称
    // 打包输出的其他文件名称
    chunkFilename: "js/[name].[contenthash:8].chunk.js",
    path: path.resolve(__dirname, "../dist"), // 打包后的目录
    
    // 图片 等字体通过type: asset处理资源命名方式
    assetModuleFilename: 'media/[name].[contenthash:8][ext][query]',
  },

  new MiniCssExtractPlugin({
      filename: "css/[name].[contenthash:8].css"
    }),

添加移除loader中字体、媒体文件的命名规则

  // generator: {
            //   filename: "fonts/[name].[contenthash:8][ext][query]"
            // }

Preload和Prefetch

Preload :告诉浏览器立即加载资源。
Prefetch :告诉浏览器在空闲时才开始加载资源。它们共同点: 。都只会加载资源，并不执行。。都有缓存。它们区别: Preload 加载优先级高，Prefetch 加载优先级低只能加载当前页面需要使用的资源， Prefetch 可以加载当前页面资源，也可以加载下一个页面需要使用的资源。reloa 总结: 。当前页面优先级高的资源用 Preload 加载。。下一个页面需要使用的资源用Prefetch 加载它们的问题:兼容性较差，。我们可以去 CanlUseB 网站查询 API 的兼容性问题Preload 相对于 Prefetch 兼容性好一点。

查看兼容

配置缓存，文件发生变化时，只有main 和runtime.js会重新打包，其他文件不变

runtimeChunk:{
  name:(entrypoint)=>runtime~${entrypoint.name}.js`
}

Core-js

过去我们使用 babel 对js 代码进行了兼容性处理，其中使用@babe/preset-env 智能预设来处理兼容性问题它能将 ES6 的一些语法进行编译转换，比如箭头函数、点点点运算符等。但是如果是 async 函数、promise 对象、数组的一些方法(includes)等，它没办法处理所以此时我们js 代码仍然存在兼容性问题，一旦遇到低版本浏览器会直接报错。所以我们想要将js 兼容性问题彻底解决 core-js 是专门用来做ES6 以及以上API的 polyfill。 polyfi11 翻译过来叫做垫片/补丁。就是用社区上提供的一段代码，让我们在不兼容某些新特性的浏览器上，使用该新特性。例如：Promise 就没有被打包

return new Promise(resolve => {
        resolve("成功");
      });

解决方案：

通过在代码中按需引入core-js的Promise
在babel.config.js中配置core-js

module.exports = {
 presets: [
   '@babel/preset-env',
   {
     useBuiltIns: "usage", //按需加载自动引入
     corejs: 3,
   }
 ]
};

PWA

开发 Web App 项目，项目一旦处于网络离线情况，就没法访问了。我们希望给项目提供离线体验。渐进式网络应用程序(progressiveweb application·PWA):是一种可以提供类似于 native app(原生应用程序) 体验的 Web App 的技术。其中最重要的是，在离线(offline)时应用程序能够继续运行功能。内部通过 Service Workers 技术实现的。

下载

npm install workbox-webpack-plugin --save-dev

npm run build 现在你可以看到，生成了两个额外的文件：service-worker.js 和名称冗长的 precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js。service-worker.js 是 Service Worker 文件，precache-manifest.b5ca1c555e832d6fbf9462efd29d27eb.js 是 service-worker.js 引用的文件，所以它也可以运行。你本地生成的文件可能会有所不同，但是应该会有一个 service-worker.js 文件。

注册 Service Worker

 if ('serviceWorker' in navigator) {
   window.addEventListener('load', () => {
     navigator.serviceWorker.register('/service-worker.js').then(registration => {
       console.log('SW registered: ', registration);
     }).catch(registrationError => {
       console.log('SW registration failed: ', registrationError);
     });
   });
 }

启动会发现未成功，这个时候要安装server npm i server -g 启动 sever dist [具体可参考]（https://www.webpackjs.com/guides/progressive-web-application/#adding-workbox）

pear/vue-webpack5 .gitee-modal { width: 500px !important; }