webpack5---js 兼容性处理

882 阅读1分钟

在写js 的时候,使用了es6 等最新的语法,那么在低版本的浏览器中是不能直接运行的,需要去做兼容性处理。

首先 下载需要的插件 yarn add -D @babel/core @babel/preset-env babel-loader core-js

js兼容性处理 需要 @babel/core babel-loader

  1. 基本的js 处理 @babel/preset-env 只能处理简单的语法
  2. 全部js 兼容处理 @babel-polyfill 能够处理 例如 promise
  3. 按需加载 core-js
{
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            // 指定加载器
            loader: 'babel-loader',
            // 设置预定义的环境
            options: {
              // 指定环境的插件
              presets: [
                [
                  '@babel/preset-env',
                  // 配置信息
                  {
                    // 要兼容的浏览器
                    targets: {
                      'chrome': '88',
                      "ie": '11'
                    },
                    // 指定下载的 corejs 版本
                    "corejs": '3',
                    // 使用corejs 的方式 usage 表示按需加载
                    "useBuiltIns": "usage"
                  }
                ]
              ]
            }
          }
        ],
        
      },