1. webpack打包

1. 先生成package.json文件

   npm init
   

2. 下載依賴包

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

3. 創(chuàng)建一個webpack.config.js文件

   //*  引入一個包,用來拼接路徑字符串
   const path=require("path")
   
   //*  webpack中的所有配置信息都應(yīng)該寫在module.exports中
   module.exports={
     //指定入口文件
     entry:"./src/index.ts",
     // 指定打包文件所在位置
     output:{
       // 指定打包文件的目錄
       path:path.resolve(__dirname,"dist"),
       // 打包后的文件
       filename:"bundle.js"
     },
     // 指定webpack打包時要使用的模塊
     module:{
       //指定要加載的規(guī)則
       rules:[
         {
           // test指定規(guī)則生效的文件
           // 指定以ts結(jié)尾的文件
           test:/\.ts$/,
           // 要使用的loader
           use:"ts-loader",
           // 要排除的文件
           exclude:/node_modules/
         }
       ]
     }
   }
   

4. 創(chuàng)建tsconfig.json文件

   tsc --init
   

    配置相關(guān)信息
   

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

1.1 html插件

html-webpack-plugin

1.2 webpack-dev-server

實(shí)時打包文件，如果入口文件發(fā)生變化，會重新自動打包文件

webpack-dev-server

    "start": "webpack serve --open chrome.exe"

啟動webpack的服務(wù)器，并同時打開谷歌瀏覽器

1.3 clean-webpack-plugin

每一次編譯前，先把dist目錄自動清空，然后將新文件放進(jìn)去，這樣就能確保dist文件里面的文件都是最新的，避免有舊文件的存在。

由于每次打包生成的js代碼的語法都是最新的，很可能不兼容一些語法。

所以需要一個工具將代碼改為不同的，來兼容更多的瀏覽器。

1.4 安裝babel相關(guān)的東西

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

加載器的順序是從后往前加載編譯

1.5 配置文件的總的內(nèi)容

//*  引入一個包,用來拼接路徑字符串
const path=require("path")
// * 引入html插件 這個插件的作用是自動生成html文件，并引入相關(guān)資源
const HTMLWebpackPlugin=require("html-webpack-plugin")
// * 
const {CleanWebpackPlugin}=require("clean-webpack-plugin");
//*  webpack中的所有配置信息都應(yīng)該寫在module.exports中
module.exports={
  //指定入口文件
  entry:"./src/index.ts",
  // 指定打包文件所在位置
  output:{
    // 指定打包文件的目錄
    path:path.resolve(__dirname,"dist"),
    // 打包后的文件
    filename:"bundle.js",
    environment:{
      arrowFunction:false
    }
  },
  // 指定webpack打包時要使用的模塊
  module:{
    //指定要加載的規(guī)則
    rules:[
      {
        // test指定規(guī)則生效的文件
        // 指定以ts結(jié)尾的文件
        test:/\.ts$/,
        // 要使用的loader
        use:[
          // 配置babel
          {
            // 指定加載器
           loader:"babel-loader" ,
          //  設(shè)置babel
          options:{
            // 設(shè)置預(yù)定義的環(huán)境
            presets:[
              [
                // 指定環(huán)境的插件
                "@babel/preset-env",
                // 配置信息
                {
                  // 要兼容的目標(biāo)瀏覽器
                  targets:{
                    "chrome":"82",//需要兼容瀏覽器的88版本
                    "ie":"11"
                  },
                  // 指定corejs的版本
                  "corejs":"3",
                  // 使用corejs的方式
                  "useBuiltIns":"usage",//usage按需加載
                }
              ]
            ]
          }
        },
        "ts-loader"],
        // 要排除的文件
        exclude:/node_modules/
      }
    ]
  },
  // 配置webpack的插件
  plugins:[
    new HTMLWebpackPlugin({
      // title:"這是一個自定義的title"

      // template是設(shè)置html頁面的模板是哪個,再生成的index.html是根據(jù)模板來生成的
      template:"./src/index.html"
    }),
    new CleanWebpackPlugin()
  ],
  mode:"production",
  // 用來設(shè)置引用模塊
  resolve:{
    extensions:[".ts",".js"]
  }
}