一般我们webpack都会起，编写完webpack.config.js文件后，命令行执行“webpack” 就能生成对应的文件或文件夹
单独的起服务我们也会，例如写在index.js文件中，引入express,配置完成后 在package.json编写start命令，“node index.js”就可以开启服务
但两者怎么结合我一直没搞明白，今天有空终于看了下
在创建express实例的文件中（此处是index.js文件），
引入webpack模块，
引入webpack的配置文件webpack.config.js
let webpackDevConfig = require('../webpack.config.js'); let compiler = webpack(webpackDevConfig); // attach to the compiler & the server app.use(webpackDevMiddleware(compiler, { // public path should be the same with webpack config publicPath: webpackDevConfig.output.publicPath, logLevel: 'error', stats: { colors: true } }));
在项目中位置（只示意所在文件，要有app，使用app.use()关联 ,并非一定要在谁上面谁下面，自己体会，）
再看ts
先安装：
npm install -g typescript
或 cnpm install -g typescript
webpack的配置文件里，module对象中增加.ts文件处理，使用ts-loader
{ test: /.ts$/, use: ‘ts-loader’ }
当然你要先install该loader
新建个.ts后缀的文件（我本地是文件路径在 src/greeter.ts）
// 文件路径 src/greeter.ts
interface Person {
firstName: string;
lastName: string;
}
class Student {
fullName: string;
constructor(public firstName: string, public middleInitial: string, public lastName: string) {
this.fullName = firstName+' '+ middleInitial + ' '+ lastName;
}
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M", "User");
document.body.innerHTML = greeter(user);
命令行执行tsc src/greeter.ts
在ts文件同路径下会生成转化后的js文件，
新建个html引用该js就可以静态查看结果改变后的html页面了
<!DOCTYPE html>
<html>
<head><title>TypeScript Greeter</title></head>
<body>
<script src="greeter.js"></script>
</body>
</html>