typescript+webpack+webpack-dev-server结合在网页中运行

今天我们要把typescript结合前端构建工具(webpack)来运行。

前面我们的案列(User类)，我们已经在终端下运行过(node.js环境下)，没有问题。

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
// 引入
var User_1 = require("./User");
var UserService_1 = require("./UserService");
// 实例化类
var myUser = new User_1.User({
    userName: "jack",
    userAge: 22
});
var myService = new UserService_1.UserService(myUser);
console.log(myService.add());

index.js的代码。index.js是index.ts编译之后的文件。
这样的代码是肯定不能在网页里运行的。
比如我们有个index.html，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 引入编译之后的js文件 -->
<script src="./built/index.js"></script>
</body>
</html>

那么怎么办？
借助一些构建工具，比如webpack。

1、安装webpack和ts-loader

#进入项目根目录 执行
npm install webpack ts-loader --save-dev

2、创建webpack配置文件webpack.config.js

https://webpack.github.io/docs/configuration.html
https://tslang.cn/docs/handbook/integrating-with-build-tools.html

module.exports = {
    entry: {
        "index":"./src/index.ts" // 入口文件可以多个
    },
    output: {
        filename: "[name].js",  // 这里会自动生成index.js
        path:__dirname+"/built" // 输出到哪个文件夹
    },
    resolve: {
         extensions: [".ts",".js"]     // 自动补全，很重要
    },
    module: {
        loaders: [
            { test: /\.ts$/, loader: "ts-loader" }   // 使用了ts-loader
        ]
    }
};

3、修改node配置文件package.json

给scripts锻加一项

    "wp":"webpack"

执行npm run wp命令就会默认去找webpack配置文件。

4、我们执行一次webpack

npm run wp

这个时候生成的新的/built/index.js就可以在浏览器使用了。

ok。其实到这里typescript+webpack结合，然后使得程序可以在网页中运行就算完成了。

webpack-dev-server

因为每次修改都需要重新『编译』，如果项目很大，编译就比较慢了。
所以webpack-dev-server就可以发挥作用了。
使用webpack-dev-server，我们一遍修改代码，webpack一边默默的『编译』。

1、安装

#根目录下 执行
npm install webpack-dev-server --save-dev

2、在根目录下新建一个配置文件，比如叫webpack.config.dev.js

module.exports = {
    entry: {
        "index":"./src/index.ts" // 入口文件可以多个
    },
    output: {
        filename: "[name].js",  // 这里会自动生成index.js
        publicPath: "/" // 我们这就生成到根目录
    },
    resolve: {
        extensions: [".ts",".js"]    // 自动补全，很重要
    },
    module: {
        loaders: [
            { test: /\.ts$/, loader: "ts-loader" }   // 使用了ts-loader
        ]
    }
};

3、其他配置
在项目配置文件package.json文件的scripts段，添加一项：

   "wp-dev": "webpack-dev-server --config webpack.config.dev.js --inline --hot --content-base ./webapp"

可以看出wp-dev命令，使用的是webpack.config.dev.js这个配置文件，内容基于webapp这个文件夹。
所以我们还需要在目录文件一个webapp目录，里面新建一个index.html：

<script src="index.js"></script>

我们在webpack.config.dev.js这个配置文件中，webpack热编译的index.js是在根目录(实质在内存)。

4、开启webpack热编译

npm run wp-dev

如果没有报错，就是成功。

根据提示我们应该访问：http://localhost:8080/index.html

之后，我们修改.ts代码，页面上就会马上表现出效果了，不需要再去执行编译命令了。
这在我们开发阶段真是省时省力啊。