1、在项目中安装npm

使用代码：npm install在项目中安装npm，安装成功会生成node-modules文件夹和package.json文件

2、在项目中安装webpack，webpack-cli，typescipt，ts-loader依赖

使用代码：npm install webpack webpack-cli typescript ts-loader --save-dev安装所需的依赖，安装成功，会在package.json文件中生成依赖

3、配置webpack打包配置文件webpack.config.js

const path=require('path');
module.exports={
  //指定入口文件
  entry: "./js/index.ts",
  //指定输出目录
  output: {
    //指定打包文件目录路径
    path: path.resolve(__dirname,"demo"),
    //打包后文件的文件
    filename: "bundle.js"
  },
  mode:'development',
  //指定webpack打包时要使用的模块
  module: {
    //指定加载的规则
    rules: [
      {
        //制定规则生成的文件
        test:/\.ts$/,
        //要使用的loader
        use: "ts-loader",
        //要排除的文件
        exclude: [/node-modules/]
      }
    ]
  }
}

4、配置ts编译配置文件tsconfig.json

{
  /*"include"用来表示哪些ts文件需要被编译,
  采用相对路径，其中** 表示任意目录，* 表示任意文件*/
  "include": [
    "./js/*"
  ],

  /*"exclude"用来表示哪些ts文件不需要被编译,
  采用相对路径，其中** 表示任意目录，* 表示任意文件*/
  "exclude": [
    "node_modules"
  ],

  /*编译器配置选项*/
  "compilerOptions": {
    //编译转换的js版本
    "target": "es6",
    //编译转化的模块化标准
    "module": "es6"
  }
}

5、编写测试代码

按照webpack配置中entry: “./js/index.ts”,新建对应文件，并编写相应的测试代码：

6、运行打包

方法1-直接在项目所在文件夹目录命令行输入"webpack"。
方法2-在package.json文件中配置运行命令，并在项目文件命令行中输入"npm run webpack"

7、模块化引入问题

有时候我们使用了模块化，而webpack打包时不清楚哪些文件可以引入，这就需要我们在webpack配置文件里设置

module.exports={
  resolve: {
    extensions: ['.ts','.js']//ts,js文件可以引入模块化
  }
}

8、打包浏览器兼容问题

实际项目中，网页会在不同浏览器中进行访问，这就需要注意兼容性问题了。

  1. 安装@babel/core，@babel/preset-env，babel-loader，core-js所需依赖，安装指令npm install @babel/core @babel/preset-env babel-loader core-js --save-dev
  2. 优化webpack配置文件webpack.config.js
//引入一个包
const path=require('path');
module.exports={
  //指定输出目录
  output: {
    //指定打包文件目录路径
    path: path.resolve(__dirname,"demo"),
    //打包后文件的文件
    filename: "bundle.js",
    //配置环境不适用箭头函数
    environment:{
      //是否采用箭头函数
      arrowFunction:false
    }
  },
  //指定webpack打包时要使用的模块
  module: {
    //指定加载的规则
    rules: [
      {
        //要使用的loader
        use:[
          //配置babel
          {
            //指定加载器
            loader: "babel-loader",
            //设置babel
            options: {
              presets:[
                [
                  //制定环境插件
                  "@babel/preset-env",
                  //配置信息
                  {
                    //需要兼容的目标浏览器
                    targets:{
                      "chrome":"88",
                      "ie":"11"
                    },
                    //指定core-js版本
                    "corejs":"3",
                    //使用core-js的方式为按需加载
                    "useBuiltIns":"usage"
                  }
                ]
              ]
            }
          },
          "ts-loader"
        ]
      }
    ]
  }
}

webpack配置可复制

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

module.exports={
  //指定入口文件
  entry: {
    main: "./js/index.ts",
  },
  
  //指定输出目录
  output: {
    //指定打包文件目录路径
    path: path.resolve(__dirname,"demo"),
    
    //打包后文件的文件
    filename: "bundle.js",
    
    //配置环境不适用箭头函数
    environment:{
      arrowFunction:false
    }
  },
  
  //打包模式
  mode:'development',
  
  //指定webpack打包时要使用的模块
  module: {
    //指定加载的规则
    rules: [
      {
        //制定规则生成的文件
        test:/\.ts$/,
        
        //要使用的loader
        use:[
          //配置babel
          {
            //指定加载器
            loader: "babel-loader",
            
            //设置babel
            options: {
              presets:[
                [
                  //制定环境插件
                  "@babel/preset-env",
                  
                  //配置信息
                  {
                    //需要兼容的目标浏览器
                    targets:{
                      "chrome":"88",
                      "ie":"11"
                    },
                    
                    //指定core-js版本
                    "corejs":"3",
                    
                    //使用core-js的方式为按需加载
                    "useBuiltIns":"usage"
                  }
                ]
              ]
            }
          },
          "ts-loader"
        ],
        
        //要排除的文件
        exclude: [/node-modules/]
      }
    ]
  },
  
  //配置webpack插件
  plugins: [
    //作用打包自动生成html，并引入相应资源
    new HtmlWebpackPlugin({
      //自定义title
      title: "Hello,TypeScript!",
      
      //按模板生成html
      template: "./demo.html"
    }),
    
    new CleanWebpackPlugin(),
  ],
  
  resolve: {
    extensions: ['.ts','.js']
  }
}