一般我們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>