TypeScript 学习笔记 —— （三）使用 webpack 打包 ts 代码

此笔记记录的是 尚硅谷TypeScript教程（李立超老师TS新课） 课程笔记

打包步骤

1. npm init -y 用来在项目根目录生成一个 package.json，初始化项目
2. npm i 安装依赖（webpack, webpack-cli, typescript, ts-loader）
3. 编写 webpack 配置文件，名字叫 webpack.config.js
4. 编写 tsconfig.json 配置文件
5. 修改 package.json 文件，增加 build 命令
6. 使用 npm run build 执行 webpack 对项目进行打包

webpack.config.js

1. const path = require('path') 一个 node.js 的模块，用来拼接路径
2. entry 指定入口文件
3. output 指定打包文件所在目录
   • path 指定打包文件的目录
   • filename 指定打包后文件的名字
4. module 指定 webpack 打包时要使用的模块
   • rules 指定要加载的规则
     • test 指定的是规则生效的文件
     • use 指的是要使用的 loader，从后往前执行
     • exclude 指的是要排除的文件
     • 以上配置的意思是，用 use 的 loader 规则校验所有后缀是 .ts 的文件，除去 node-modules 的文件夹

5. plugins 指定配置的插件
   • 项目中使用插件时，先使用 npm i -D plugin 命令安装插件，然后在 webpack.config.js 中引入插件，最后在配置项中配置该插件

6. resolve 用来设置引用模块，表示这些模块可以作为模块被引用

tsconfig.json

package.json

• 新增 build 命令

babel

• 为了解决打包后代码的浏览器兼容性问题，需要使用 babel
• 安装包
  1. @babel/core babel 的核心工具包
  2. @babel/preset-env 安装它可以使代码适用于不同的浏览器
  3. babel-loader 把 babel 和 webpack 结合的工具
  4. core-js 模拟 js 运行环境

编译流程

• ts 文件先找到 ts-loader，把 ts 转换为 js
• 然后 js 找 babel 转换成老版本的 js