HTML5游戏开发(三)：使用webpack构建TypeScript应用

《HTML5游戏开发》系列文章的目的有：1、以最小的成本去入门egret小项目开发，官方的教程一直都是面向中重型；2、egret能够很是轻量；3、egret相比PIXI.js和spritejs文档更成熟、友好；4、学习从0打造高效的开发工做流。

• HTML5游戏开发(一)：3分钟建立一个hello world
• HTML5游戏开发(二)：使用TypeScript编写代码
• HTML5游戏开发(三)：使用webpack构建TypeScript应用
• HTML5游戏开发(四)：飞机大战之显示场景和元素
• HTML5游戏开发(五)：飞机大战之让全部元素动起来

本节咱们将会：

• 使用webpack来构建基于TypeScript的应用。
• 实现基于webpack的实时从新加载(live reloading)，以提高咱们的效率。
• 改造项目的结构，以适应逻辑更复杂的应用。

项目示例源码: github.com/wildfirecod…

在线演示地址：wildfirecode.com/egret-webpa…

改造项目结构和TypeScript配置

在根目录建立src文件夹来存放用户代码以及defs文件夹来存放TypeScript声明文件。

mkdir src && mkdir defs
复制代码

以后把main.ts文件移入src，把defs.d.ts移入defs。

因为咱们修改了项目结构，咱们须要更改TypeScript配置。在tsconfig.json中添加与compilerOptions同级的属性include。咱们的配置文件内容将会变成这样：

{
    "compilerOptions": {
        "module": "es6",
        "target": "es5"
    },
    "include": [
        "src",
        "defs"
    ]
}
复制代码

如今除了src&defs，其余的代码都不会被编译器编译进去。

引入webpack并实现实时从新加载(live reloading)

让咱们来使用webpack来构建TypeScript项目。 咱们先安装webpack以及TypeScript相关依赖。

npm install --save-dev webpack  webpack-cli webpack-dev-server typescript ts-loader
复制代码

接着，添加webpack配置文件webpack.config.js。

const path = require('path');
module.exports = {
    entry: './src/main.ts',
    devtool: 'eval',
    devServer: {
        contentBase: '.'
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, '.')
    }
};
复制代码

其中特别须要说明的是，咱们增长了sourcemap支持，以便进行代码debug。

而后，让咱们把index.html的用户代码入口文件main.js修改一下:

<script src="bundle.js"></script>
复制代码

测试webpack

在package.json中添加script脚本start：

{
    "scripts": {
        "start": "webpack-dev-server --open"
    }
}
复制代码

如今，咱们能够在命令行中运行 ：

npm start
复制代码

以后就会看到浏览器自动加载页面。若是如今修改和保存任意源文件，web服务器就会自动从新加载编译后的代码。试一下，运行结果和以前同样！