webpack打包TS

1. webpack打包

1. 先生成package.json文件

   npm init
   

2. 下载依赖包

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

3. 创建一个webpack.config.js文件

   //*  引入一个包,用来拼接路径字符串
   const path=require("path")
   
   //*  webpack中的所有配置信息都应该写在module.exports中
   module.exports={
     //指定入口文件
     entry:"./src/index.ts",
     // 指定打包文件所在位置
     output:{
       // 指定打包文件的目录
       path:path.resolve(__dirname,"dist"),
       // 打包后的文件
       filename:"bundle.js"
     },
     // 指定webpack打包时要使用的模块
     module:{
       //指定要加载的规则
       rules:[
         {
           // test指定规则生效的文件
           // 指定以ts结尾的文件
           test:/\.ts$/,
           // 要使用的loader
           use:"ts-loader",
           // 要排除的文件
           exclude:/node_modules/
         }
       ]
     }
   }
   

4. 创建tsconfig.json文件

   tsc --init
   

    配置相关信息
   

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

1.1 html插件

html-webpack-plugin

1.2 webpack-dev-server

实时打包文件，如果入口文件发生变化，会重新自动打包文件

webpack-dev-server

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

启动webpack的服务器，并同时打开谷歌浏览器

1.3 clean-webpack-plugin

每一次编译前，先把dist目录自动清空，然后将新文件放进去，这样就能确保dist文件里面的文件都是最新的，避免有旧文件的存在。

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

所以需要一个工具将代码改为不同的，来兼容更多的浏览器。

1.4 安装babel相关的东西

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

加载器的顺序是从后往前加载编译

1.5 配置文件的总的内容

//*  引入一个包,用来拼接路径字符串
const path=require("path")
// * 引入html插件 这个插件的作用是自动生成html文件，并引入相关资源
const HTMLWebpackPlugin=require("html-webpack-plugin")
// * 
const {CleanWebpackPlugin}=require("clean-webpack-plugin");
//*  webpack中的所有配置信息都应该写在module.exports中
module.exports={
  //指定入口文件
  entry:"./src/index.ts",
  // 指定打包文件所在位置
  output:{
    // 指定打包文件的目录
    path:path.resolve(__dirname,"dist"),
    // 打包后的文件
    filename:"bundle.js",
    environment:{
      arrowFunction:false
    }
  },
  // 指定webpack打包时要使用的模块
  module:{
    //指定要加载的规则
    rules:[
      {
        // test指定规则生效的文件
        // 指定以ts结尾的文件
        test:/\.ts$/,
        // 要使用的loader
        use:[
          // 配置babel
          {
            // 指定加载器
           loader:"babel-loader" ,
          //  设置babel
          options:{
            // 设置预定义的环境
            presets:[
              [
                // 指定环境的插件
                "@babel/preset-env",
                // 配置信息
                {
                  // 要兼容的目标浏览器
                  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是设置html页面的模板是哪个,再生成的index.html是根据模板来生成的
      template:"./src/index.html"
    }),
    new CleanWebpackPlugin()
  ],
  mode:"production",
  // 用来设置引用模块
  resolve:{
    extensions:[".ts",".js"]
  }
}