您的位置：首页 > Web前端 > Webpack

使用webpack搭建typescript 开发环境

2017-03-09 00:00 645 查看

一 创建目录

/src
--main.ts
--person.ts
index.html
package.json
tsconfig.json
webpack.config.js


二 配置三个文件

1.package.json文件配置

{
"name": "zgz",
"version": "1.0.0",
"description": "this a typescript",
"dependencies": {},
"devDependencies": {
"ts-loader": "^2.0.1",
"typescript": "^2.2.1",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
},
"author": "zgz",
"license": "ISC"
}

2.tsconfig.json文件配置

{
"compilerOptions": {
"module": "commonjs",
"sourceMap": true
},
"files": [
"./src/main.ts"
]
}

3.webpack.config.js文件配置

module.exports = {
entry: './src/main.ts',
output: {
filename: './dist/app.bundle.js'
},
module: {
loaders: [{
test: /\.ts$/,
loader: 'ts-loader'
}]
},
resolve: {
extensions: ['.js', '.ts']
}
}


三 码代码

main.ts

import Person from './Person';

let p =new Person('刑天','5000','战士');

document.write(p.say());

person.ts

class Person {

name: string
age: string
job: string

constructor(name,age,job) {
this.name = name;
this.age = age;
this.job = job;
}

say() {
return `<h1>姓名：${this.name},<br>年龄：${this.age}。<br>职位：${this.job}</h1>`;
}
}

export default Person;

index.html

<html>

<head>
<meta charset="utf-8">
</head>

<body>
<script type="text/javascript" src="./dist/app.bundle.js" charset="utf-8"></script>
</body>

</html>


四 运行

打开命令行工具

编译

webpack

启服务

webpack-dev-server

访问

在浏览器输入 localhost:8080
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航