webpack配置typescript项目
<p> </p><p>有时候我们需要创建一个单单使用typescript的项目，如：我们想使用typescript开发一个网页游戏，如果使用ts文件，每次写完都要tsc的方式输出相应的js文件，我们想能不能通过使用webpack的方式自动编译自动输出。具体实现方式如下：</p>
<ul>
<li>首先创建一个项目文件，如果没有安装typescript： cnpm install -g typescript</li>
<li>创建tsconfig.json文件，也可以使用tsc --init 的方式生成，并修改成如下：（这个主要是用来单独配置ts的输出的，如果你使用vs的终端选项的Task，可以自动监控这个json文件，从而达到自动输出js文件的效果，这个配置文件本质来说和webpack的打包没有关系。
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">{
"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命令就能自动编译</pre>
</div>
</li>
<li>创建文件目录：（需要创建的是dist/js、src/app.ts、index.html、webpack.dev.config.js)</li>
</ul>
<p><img style="display: block; margin-left: auto; margin-right: auto" src="https://img2020.cnblogs.com/blog/1431906/202006/1431906-20200603170256673-623614861.png" alt=""></p>
<p> </p>
<ul>
<li>使用命令：cnpm init 自动生成package.json文件</li>
<li>执行如下命令，安装webpack相关的组件：cnpm install webpack webpack-cli typescript ts-loader --save-dev</li>
<li>编辑之前创建的webpack.dev.config.js文件：
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">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"]
}
} </pre>
</div>
</li>
<li>
<p>修改package.json文件（其中涉及到的是webpack需要的包，以及启动命令）</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">{
"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"
}
} </pre>
</div>
</li>
<li>此时的app.ts文件如下：
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">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";
} </pre>
</div>
</li>
<li>
<p> </p>
index.html文件
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;"><!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>
</pre>
</div>
<p> </p>
</li>
<li>
<p> </p>
如果想在本地有一个服务，每次修改代码都会触发一次生成编译，这时候我们需要有以下操作：
<ul>
<li>安装 webpack-dev-server插件：cnpm install webpack-dev-server html-webpack-plugin --save-dev</li>
<li>修改webpack.dev.js：
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">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
}
} </pre>
</div>
</li>
<li>
<p> </p>
package.json文件修改：
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"
},
</pre>
</div>
<p> </p>
</li>
</ul>
</li>
</ul>
<p> </p><br><br>
来源：https://www.cnblogs.com/double-W/p/13038799.html
頁:
[1]