TypeScript快速上手学习笔记-第六篇——联合webpack打包ts文件

1、在项目中安装npm

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

2、在项目中安装webpack，webpack-cli，typescript，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、效果

8、 拓展——webpack插件（html-webpack-plugin）

“html-webpack-plugin”作用在于打包后自动生成html，并引入相应资源。
首先，在项目里通过npm install html-webpack-plugin -save-dev安装插件，
便在webpack配置文件中引入并设置参数：

//引入一个包
const path=require('path');
//引入html插件
const HtmlWebpackPlugin =require('html-webpack-plugin');

module.exports={
  //指定入口文件
  entry: {
    main: "./js/index.ts",
  },
  //指定输出目录
  output: {
    //指定打包文件目录路径
    path: path.resolve(__dirname,"demo"),
    //打包后文件的文件
    filename: "[name].[chunkhash].js"
  },
  mode:'development',
  //指定webpack打包时要使用的模块
  module: {
    //指定加载的规则
    rules: [
      {
        //制定规则生成的文件
        test:/\.ts$/,
        //要使用的loader
        use: "ts-loader",
        //要排除的文件
        exclude: [/node-modules/]
      }
    ]
  },
  //配置webpack插件
  plugins: [
    //作用打包自动生成html，并引入相应资源
    new HtmlWebpackPlugin({
      //自定义title
      title: "Hello,TypeScript!",
      //按模板生成html
      template: "./demo.html"
    })
  ]
}

其中参数title可以自定义生成的文件标题，参数template可以按对应的html模板生成对应的html。

9、 拓展——webpack插件（clean-webpack-plugin）

“clean-webpack-plugin”作用在于可以先清除打包文件再重新生成。
首先，在项目里通过npm install clean-webpack-plugin -save-dev安装插件，
便在webpack配置文件中引入并设置参数：

//引入一个包
const path=require('path');
//引入html插件
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: "[name].[chunkhash].js"
  },
  mode:'development',
  //指定webpack打包时要使用的模块
  module: {
    //指定加载的规则
    rules: [
      {
        //制定规则生成的文件
        test:/\.ts$/,
        //要使用的loader
        use: "ts-loader",
        //要排除的文件
        exclude: [/node-modules/]
      }
    ]
  },
  //配置webpack插件
  plugins: [
    //作用打包自动生成html，并引入相应资源
    new HtmlWebpackPlugin({
      //自定义title
      title: "Hello,TypeScript!",
      //按模板生成html
      template: "./demo.html"
    }),
    new CleanWebpackPlugin(),
  ]
}

10、 拓展——webpack插件（webpack-dev-server）

webpack-dev-server提供了一个简单的 web 服务器, 并且能够实时重新加载(live reloading), 也就是启动了 webpack-dev-server 之后, 每次修改源文件代码就不用再手动重新构建, 它会自动检测到代码变化, 自动重新构建，webpack-dev-server 插件所重新打包的文件并不会存放在实际的物理磁盘当中，所以我们没有办法看到，它被存在电脑的内存中。
在项目里通过npm install webpack-dev-server安装插件，
然后在命令行执行webpack serve --open chrome.exeopen是浏览器的执行文件，博主这边是谷歌浏览器。

11、模块化引入问题

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

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

12、打包浏览器兼容问题

实际项目中，网页会在不同浏览器中进行访问，这就需要注意兼容性问题了。
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打包输出默认会在最为层生成箭头函数，而对于早期浏览器箭头函数是不兼容的，所以我们，以箭头函数方式输出。

environment:{
  //是否采用箭头函数
  arrowFunction:false
}

这里是配置需要兼容的浏览器版本的

presets:[
   [
      {
        //需要兼容的目标浏览器
        targets:{
        "chrome":"88",
        "ie":"11"
        }        
      }
   ]
]

引入core-js主要是因为有些浏览器不兼容Promise，当我们写了Promise则会因为不识别而报错，而这时core-js会生成自己的Promise， “useBuiltIns”:“usage” 按需加载，用到的时候再加载，没用到则不加载。

presets:[
   [
      {   
         //指定core-js版本
         "corejs":"3",
         //使用core-js的方式为按需加载
         "useBuiltIns":"usage"         
      }
   ]
]

13、完整配置文件

tsconfig.json

{
  //"include"用来表示哪些ts文件需要被编译
  "include": [
    "./js/*"
  ],

  //"exclude"用来表示哪些ts文件不需要被编译
  "exclude": [
    "node_modules"
  ],

   //定义了被继承引入的其它配置文件
   "extends": ["./js/base"],
   
   //指定了需要编译的ts列表,只会用于编译文件较少的情况
   "files": [
      "01_hellots.ts",
      "02_basics.ts",
      "03_types.ts",
      "04_config.ts"
    ],

  /*编译器配置选项*/
  "compilerOptions": {
      //编译转换的js版本
      "target": "es6",
    
      //编译转化的模块化标准
      "module": "es6",
    
      //用来制定项目中需要使用的库，一般不进行修改
      "lib": ["dom"],
      
      //编译之后js存放位置
      "outDir": "./ts_js",
      
      //将所有ts文件编译到一个js
      "outFile": "./ts_js/index.js",
      
      //是否对js进行编译
      "allowJs": false,
      
      //是否按ts语法检查js
      "checkJs": false,
      
      //是否移除注解
      "removeComments": false,
      
      //是否不生成编译后文件
      "noEmit": false,
      
      //报错时候不生成文件
      "noEmitOnError": true,
      
      //严格状态开启
     "strict": true,
     
     //编译后js时候开启严格模式
     "alwaysStrict": true,
     
     //不允许使用饮食any类型
     "noImplicitAny": true,
     
      //不允许使用不明确指向的this
      "noImplicitThis": true,
      
      //检查元素是否为空
     "strictNullChecks": true
  }
}

webpack.config.js

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']
  }
}