1、监听某个文件自动编译 tsc xxx.ts -w
2、监听某个文件夹下的所有文件自动编译
- 在文件夹下创建tsconfig.json
- 执行tsc命令，则会编译该文件夹下的所有文件
- 执行tsc -w，则会监听所有文件
3、使用webpack打包ts
- 安装package.json文件，输入npm init -y.
- 安装依赖，输入命令npm i -D webpack webpac k-cli typescript ts-loader
- 创建webpack.config.js文件,并进行配置
- 创建tsconfig.json文件，并进行配置
- 在package.json中配置
-
- 找到“scripts”，在其中添加“build”：webpack，即通过build命令直接执行webpack
- 安装webpack打包html的插件
-
- 输入npm i -D html-webpack-p lugin,回车
-
- 在webpack.config.js中引入该插件
-
-
- const HtmlWebpackPlugin = require('html-webpack-plugin');
-
-
-
- 在module模块同级，加入plugins plugins:[ //配置插件的节点
-
plugins:[ //配置插件的节点
new HtmlWebpackPlugin({
template:'./src/index.html' //指定模板文件路径
}), //创建一个HtmlWebpackPlugin的实例
],
-
-
- 即可轻松打包使用
-
4、安装webpack内置服务器，可将修改的项目自动重新构建
- 输入命令： npm i -D webpack-dev-server
- 在package.json的‘scripts’内添加"start": "webpack serve --open chrome.exe"
- 在命令行输入：npm start,即可执行，并且实时更新项目中的改动
5、安装清除插件，可在每次重新编译时清空dist之前的文件
- 命令行输入‘npm i -D clean-webpack-plugin’
- 在webpack.config.js中引入该插件
-
- const {CleanWebpackPlugin} = require('clean-webpack-plugin');
- 在‘plugins’中添加‘new CleanWebpackPlugin()’即可使用
- tip:无论是引入还是创建时，一定要大写，否则会报错
6、在引用ts文件时，代码可能无法识别，需进行设置
- 在webpack.config.js中添加resolve，注意：与plugins同级
resolve:{ //设置引用模块时可以省略的后缀名,引用之后，代码可以识别模块化的写法
extensions:['.ts','.js']
}
