使用webpack打包ts

1. 初始化package.json npm init -y
2. cnpm i -D webpack webpack-cli(webpack命令行工具) typescript ts-loader(整合)
   2.1 自动生成html文件
   cnpm i -D html-webpack-plugin
   2.2 webpack内置服务器(自动刷新项目)
   cnpm i -D webpack-dev-server
   在package.json里写
   自动打开谷歌浏览器
   "start":"webpack serve --open chrome.exe"
   执行npm start
   2.3 清除dist目录
   cnpm i -D clean-webpack-plugin
   3.1 解决兼容性问题
   cnpm i -D @babel/core @babel/preset-env babel-loader core-js
3. webpack.config.js

// 引入一个包
const path = require('pach');
// 在webpack.config.js引入
const HTMLWebpackPlugin = require('html-webpack-plugin');
// 引入clean插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
// webpack中的所有的配置信息都应该写在module.exports中
module.exports = {
  // 指定入口文件
   entry: ''./src/index.ts'',
 // 指定打包文件所在目录
  output:{
  // 指定打包文件的目录
   path: path.resolve(--dirname,'dist'),
  // 打包后文件的文件
  filename:''bundle.js'',
 // 告诉webpack 不使用箭头函数
  environment: {
    arrowFunction: false
    }
  }, 
// 指定webpack打包时要使用的模块
 module:{
  // 指定要加载的规划
  rules:[
   {
     // test指定规则生效的文件
      test: /\.ts$/,
     // 要使用的loder;从后往前执行
       use: [
      // 配置babel
       {
          // 指定加载器
         loader: "babel-loader",
         // 设置babel
         options:{
            // 设置预定义的环境
             presets:[
                    [
                    //  指定环境的插件
                      "@babel/preset-env",
                      // 配置信息
                      {
                       // 要运行正在哪个浏览器(后面是版本号)
                         targets: {
                              "ie":"7"
                            },
                            "corejs": "3",
                            // 使用corejs的方式("usage":表示按需加载)
                            "useBuiltIns": "usage"
                     }
                 ]
             ]
         }
       },
        'ts-loader',
      ],
    // 要排除的文件
       exclude: /node-modules/
     }
   ]
 },
// 配置webpack插件
plugins:[
  new CleanWebpackPlugin(),
  new HTMLWebpackPlugin({
          title: '这是自定义标题的位置'
      }),
   ],
// 用来设置引用模块(哪些文件可以做为模块 )
 resolve:{
    extensions: ['.ts','.js']
  }
};

配置ts
tsconfig.json

{
 "compilerOptions":{
   "module": "ES2015",
   "target": "es2015", 
  // 严格模式
    "strict":true 
 }
}

在package.json里加
"build"："webpack"