WebPack打包

npm init -y // 创建package.json文件

npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader html-webpack-plugin clean-webpack-plugin

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

const config = {
  optimization: {
    minimize: false // 关闭代码压缩，可选
  },
  entry: './src/index.ts', // 指定入口文件
  mode: 'production', // 模式(开发/生产)
  output: {
    path: path.resolve(__dirname, 'dist'), // 指定打包文件的目录
    filename: 'bundle.js', // 打包后文件的文件
    environment: {
      arrowFunction: false // 关闭webpack的箭头函数，可选
    }
  },
  // 指定webpack打包时要用的模块
  module: {
    // 指定要加载的规则
    rules: [
      {
        test: /\.ts$/, // 指定规则生效的文件
        use: [
          {
            // 指定加载器
            loader: 'babel-loader',
            options: {
              // 设置预定义的环境
              presets: [
                [
                  '@babel/preset-env', // 指定环境的插件
                  // 配置信息
                  {
                    // 要兼容的目标浏览器
                    targets: {
                      chrome: '40',
                      ie: '11'
                    },
                    corejs: '3', // // 指定corejs的版本
                    useBuiltIns: 'usage' // 使用corejs的方式(目前按需加载)
                  }
                ]
              ]
            }
          },
          'ts-loader'
        ], // 要使用的loader(后面的先执行)
        exclude: /node_modules/
      }
    ]
  },
  // 配置webpack插件
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'TypeScript学习', // 可以修改自动生成的html的标题等属性
      template: './src/index.html' // 或者根据模板生成
    })
  ],
  // 用来设置引用模块
  resolve: {
    extensions: ['.ts', '.js']
  }
};
module.exports = config;

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

{
   ...
   "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "build": "webpack",
       "start": "webpack serve --open chrome.exe"
   },
   ...
}