webpack5 添加babel-loader 添加浏览器ie11兼容打包

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

2.webpack.conf.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
    mode: 'production',
    devtool: 'source-map',
    entry:'./src/index.ts',
    //指定打包文件输出目录
    output:{
      // path 输出目录
      path:path.resolve(__dirname,'dist'),
      //filename 打包后文件的名字
      filename:'bundle.js' ,
      clean:true,
      environment:{
          arrowFunction:false  //打包初始不以箭头函数打包
      }
    },
    //module 指定webpack 打包之后的loader
    module:{
        //指定要加载的规则
      rules:[
          {
              test:/\.ts$/,
              use:[
                {
                    loader:'babel-loader',
                    options:{
                        presets:[
                            [
                            "@babel/preset-env",
                            {
                                targets:{
                                    "chrome":"58",
                                    "ie":"11"
                                },
                                "corejs":"3",   //只当corejs的版本
                                "useBuiltIns":'usage',   //使用usage  按需加载
                            }
                        ]
                           
                        ]
                    }

                },
                  'ts-loader'],
              exclude:/node-modules/
          }
      ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/template/index.template.html'
        })
    ],
    devServer:{
        client:{
            overlay:true
        }
    },
    resolve:{
        extensions:['.ts','.js']    //设置引用的模块，哪些模块可以引用
    }
}

或者上述中targets可以不写

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
    mode: 'production',
    devtool: 'source-map',
    entry:'./src/index.ts',
    //指定打包文件输出目录
    output:{
      // path 输出目录
      path:path.resolve(__dirname,'dist'),
      //filename 打包后文件的名字
      filename:'bundle.js' ,
      clean:true,
      environment:{
          arrowFunction:false  //打包初始不以箭头函数打包
      }
    },
    //module 指定webpack 打包之后的loader
    module:{
        //指定要加载的规则
      rules:[
          {
              test:/\.ts$/,
              use:[
                {
                    loader:'babel-loader',
                    options:{
                        presets:[
                            [
                            "@babel/preset-env",
                            {
                                "corejs":"3",   //只当corejs的版本
                                "useBuiltIns":'usage',   //使用usage  按需加载
                            }
                        ]
                           
                        ]
                    }

                },
                  'ts-loader'],
              exclude:/node-modules/
          }
      ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/template/index.template.html'
        })
    ],
    devServer:{
        client:{
            overlay:true
        }
    },
    resolve:{
        extensions:['.ts','.js']    //设置引用的模块，哪些模块可以引用
    }
}

package.json,要加上这一句话  browserslist 那一句话

{
  "name": "webpackts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack ",
    "start": "webpack serve --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.22.17",
    "@babel/preset-env": "^7.22.15",
    "babel-loader": "^9.1.3",
    "core-js": "^3.32.2",
    "html-webpack-plugin": "^5.5.3",
    "ts-loader": "^9.4.4",
    "typescript": "^5.2.2",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "browserslist":"Chrome >= 58, Edge >= 11"
}