webpack打包ts

1.先安装相关

 npm i webpack webpack-cli typescript ts-loader -D

2.配置package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",  
    "dev": "webpack --mode development",   //这两行不设置 --mode 会有waining提示
    "build": "webpack --mode production"
  },

 "devDependencies": {
    "@babel/core": "^7.16.5",
    "@babel/preset-env": "^7.16.5",
    "babel-loader": "^8.2.3",
    "clean-webpack-plugin": "^4.0.0",
    "core-js": "^3.19.3",
    "html-webpack-plugin": "^5.5.0",
    "ts-loader": "^9.2.6",
    "typescript": "^4.5.3",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.6.0"
  }

3.配置webpack.config.js

const path = require('path')
const htmlwebplugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  //指定入口
  entry: "./src/hello1.ts",
  //输出到哪
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: 'bundle.js',
    clean: true,
    //为了兼容ie
    environment: {
      arrowFunction: false
    }
  },
  //指定webpack打包时要用到的模块
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          //配置babel
          {
            loader: 'babel-loader',
            //配置babel
            options: {
              //设置预定义的环境
              presets: [
                [
                  //指定环境的插件
                  "@babel/preset-env",
                  //配置信息
                  {
                    //要兼容的目标浏览器
                    targets: {
                      "chrome": '87',
                      "ie": '11'
                    },
                    //指定core-js的版本
                    "corejs": '3',
                    //使用core-js方式  usage按需加载
                    "useBuiltIns": 'usage'
                  }
                ]
              ]
            }
          }, 'ts-loader'],            //ts-laoder ts=>js  babel-laoder 兼容环境
        exclude: /node_modules/
      },
    ],
  },
  //配置webpack插件
  plugins: [
    new htmlwebplugin({
      // title:'cuicuicui'
      template: './src/index.html'
    }),

    new CleanWebpackPlugin()  //在output里用clean:true也可以
  ],
  //配置扩展名可以作为模块使用
  resolve: {
    extensions: ['.ts', '.js']
  }

}

4.配置tsconfig.json

{
  "compilerOptions": {
    "module": "es6",
    "target": "es6",
    "strict": true
  }
}