HTML5游戏开发(三)：使用webpack构建TypeScript应用《HTML5游戏开发》系列文章的目的有：一、以最

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

本节我们将会：

使用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服务器就会自动重新加载编译后的代码。试一下，运行结果和之前一样！