webpack.config.js兼容IE、低版本浏览器的方法

安装babel

cnpm i -D @babel/core @babel/preset-env babel-loader core-js

webpack.config.js配置

module.exports = {

  /*指定入口文件*/
  entry: {
    app: ["babel-polyfill", "./src/main.ts"]
  },

  /* 输出配置 */
  output: {
    path: 'dist', // 输出目录

  //  告诉webpack不使用箭头函数
    environment:{
      arrowFunction:false
    }
  },

  /* 指定打包时使用的模块 */
  module: {

    // 匹配哪些文件
    test: /\.ts$/,

    // 使用的loader, 从后往前执行
    use: [
       // 2.再把js使用babel转换，此处用配置项的写法
      {
        loader:'babel-loader', // 加载器/解释器
        options:{
          // 设置预定义的环境
          presets:[
            [
              "@babel-preset-env", // 环境的插件
              {
                // 要兼容的目标浏览器
                targets:{
                  "chrome":"52",
                  "ie":"8"
                },
                // 指定corejs版本
                "corejs":"3",
                // 指定corejs的方式，usage按需加载
                "useBuiltIns":"usage"
              }
            ]
          ]
        }
      },
      // 1.先把ts转为js
      'ts-loader'
    ],

    // 排除的目录/文件
    exclude: [
      'node_module'
    ]
  },

  // 插件
  plugin: [],

  // 设置引用模块
  resolve: {
    extensions: ['ts', 'js'], // 哪些后缀名的文件可以作为模块使用
  }
};