1. 初始化package.json npm init -y
2. cnpm i -D webpack webpack-cli(webpack命令行工具) typescript ts-loader(整合)
   2.1 自動(dòng)生成html文件
   cnpm i -D html-webpack-plugin
   2.2 webpack內(nèi)置服務(wù)器(自動(dòng)刷新項(xiàng)目)
   cnpm i -D webpack-dev-server
   在package.json里寫(xiě)
   自動(dòng)打開(kāi)谷歌瀏覽器
   "start":"webpack serve --open chrome.exe"
   執(zhí)行npm start
   2.3 清除dist目錄
   cnpm i -D clean-webpack-plugin
   3.1 解決兼容性問(wèn)題
   cnpm i -D @babel/core @babel/preset-env babel-loader core-js
3. webpack.config.js

// 引入一個(gè)包
const path = require('pach');
// 在webpack.config.js引入
const HTMLWebpackPlugin = require('html-webpack-plugin');
// 引入clean插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
// webpack中的所有的配置信息都應(yīng)該寫(xiě)在module.exports中
module.exports = {
  // 指定入口文件
   entry: ''./src/index.ts'',
 // 指定打包文件所在目錄
  output:{
  // 指定打包文件的目錄
   path: path.resolve(--dirname,'dist'),
  // 打包后文件的文件
  filename:''bundle.js'',
 // 告訴webpack 不使用箭頭函數(shù)
  environment: {
    arrowFunction: false
    }
  }, 
// 指定webpack打包時(shí)要使用的模塊
 module:{
  // 指定要加載的規(guī)劃
  rules:[
   {
     // test指定規(guī)則生效的文件
      test: /\.ts$/,
     // 要使用的loder;從后往前執(zhí)行
       use: [
      // 配置babel
       {
          // 指定加載器
         loader: "babel-loader",
         // 設(shè)置babel
         options:{
            // 設(shè)置預(yù)定義的環(huán)境
             presets:[
                    [
                    //  指定環(huán)境的插件
                      "@babel/preset-env",
                      // 配置信息
                      {
                       // 要運(yùn)行正在哪個(gè)瀏覽器(后面是版本號(hào))
                         targets: {
                              "ie":"7"
                            },
                            "corejs": "3",
                            // 使用corejs的方式("usage":表示按需加載)
                            "useBuiltIns": "usage"
                     }
                 ]
             ]
         }
       },
        'ts-loader',
      ],
    // 要排除的文件
       exclude: /node-modules/
     }
   ]
 },
// 配置webpack插件
plugins:[
  new CleanWebpackPlugin(),
  new HTMLWebpackPlugin({
          title: '這是自定義標(biāo)題的位置'
      }),
   ],
// 用來(lái)設(shè)置引用模塊(哪些文件可以做為模塊 )
 resolve:{
    extensions: ['.ts','.js']
  }
};

配置ts
tsconfig.json

{
 "compilerOptions":{
   "module": "ES2015",
   "target": "es2015", 
  // 嚴(yán)格模式
    "strict":true 
 }
}

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