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服務器就會自動從新加載編譯後的代碼。試一下，運行結果和以前同樣！