有时候我们需要创建一个单单使用typescript的项目，如：我们想使用typescript开发一个网页游戏，如果使用ts文件，每次写完都要tsc的方式输出相应的js文件，我们想能不能通过使用webpack的方式自动编译自动输出。具体实现方式如下：
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/js",// 打包到的目录
"sourceMap": true,// 是否生成sourceMap（用于浏览器调试）
"noImplicitAny": false,
"noUnusedLocals": true,
"noUnusedParameters": true,
"declaration": true,// 是否生成声明文件
//"declarationDir": "./dist/types/",// 声明文件打包的位置
"declarationMap": false,// 是否生成声明文件map文件（便于调试）
"moduleResolution": "node",
"module": "esnext",
"target": "es5",// 转化成的目标语言
"baseUrl": "./",
},
"include": [ // 通过终端的task，会自动监视ts代码变化输出结果到dist中
"src/**/*.ts"
],// 要打包的文件
"exclude": [ // 排除那些文件不打包
"node_modules",
"*.test.ts"
]
}
// 使用了tsconfig.json后可以简单地使用tsc命令就能自动编译
const path = require(‘path‘)
module.exports={
entry:‘./src/app.ts‘,
output:{
path:path.resolve(__dirname,"dist/js"),
filename:‘bundle.js‘
},
module: {
rules: [ // 添加解析规则
{
test: /\.tsx?$/,
loader: ‘ts-loader‘,
exclude: /node_modules/,
},
]
},
resolve: { // 需要打包的文件后缀
extensions: [".tsx", ".ts", ".js"]
}
}
修改package.json文件（其中涉及到的是webpack需要的包，以及启动命令）
{
"name": "ts_game_web",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --config ./webpack.dev.config.js --mode development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^4.3.0",
"ts-loader": "^7.0.5",
"typescript": "^3.9.3",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
}
}
namespace TSE {
export class Engine {
private _count:number = 0;
public constructor() {
}
public start(): void {
this.loop();
}
private loop():void {
// 告诉浏览器下一次渲染之前需要调用的函数，而通常显示器的刷新频率是 60Hz，
// 即每秒重绘 60次，所以只要在回调函数中继续调用 requestAnimationFrame(callback)
// 执行自己，就能达到约每秒执行 60 次回调函数。
this._count ++ ;
document.title = this._count.toString();
requestAnimationFrame(this.loop.bind(this))
}
}
}
window.onload = function() {
let e = new TSE.Engine();
e.start();
document.body.innerHTML += "Foo";
}
index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset=‘utf-8‘>
<meta http-equiv=‘X-UA-Compatible‘ content=‘IE=edge‘>
<title>Page Title</title>
<meta name=‘viewport‘ content=‘width=device-width, initial-scale=1‘>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>
如果想在本地有一个服务，每次修改代码都会触发一次生成编译，这时候我们需要有以下操作：
const path = require(‘path‘)
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘)
module.exports={
entry:‘./src/app.ts‘,
output:{
path:path.resolve(__dirname,"dist/js"),
filename:‘bundle.js‘
},
module: {
rules: [ // 添加解析规则
{
test: /\.tsx?$/,
loader: ‘ts-loader‘,
exclude: /node_modules/,
},
]
},
resolve: { // 需要打包的文件后缀
extensions: [".tsx", ".ts", ".js"]
},
plugins:[
new HtmlWebpackPlugin({
template:‘index.html‘
})
],
devServer:{
contentBase:path.join(__dirname,‘.‘),
open:true,
port:9000
}
}
package.json文件修改：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"
},
原文：https://www.cnblogs.com/double-W/p/13038799.html