webpack 打包ts项目_webpack配置typescript项目

使用命令：cnpm init 自动生成package.json文件

执行如下命令，安装webpack相关的组件：cnpm install webpack webpack-cli typescript ts-loader --save-dev

编辑之前创建的webpack.dev.config.js文件：

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"

}

}

此时的app.ts文件如下：

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文件

Page Title

如果想在本地有一个服务，每次修改代码都会触发一次生成编译，这时候我们需要有以下操作：

安装 webpack-dev-server插件：cnpm install webpack-dev-server html-webpack-plugin --save-dev

修改webpack.dev.js：

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"

},