iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 10
0
Modern Web

關於你關於我關於phaser系列 第 10

Day 10 關於 webpack + phaser (前傳)

  • 分享至 

  • xImage
  •  

前言...

因爲開始找到了一些範例(之後會跟大家介紹),並自己實作後發現很好玩,很有野心的想要開始加東加西,發現怎麽這個程式的擴增性這麼受到限制,而且程式碼還越加越長,這樣到底怎麽辦呢?

這時候前端跨時代的發明就這麼出現啦: webpack!!

這兩天就會講一下我怎麽 webpack 的過程,今天會是事件篇,明天則是解決篇(絕對不是快生不出文章分成兩篇的)

正文

說全部都是自己從頭開始建立也是錯的,畢竟沒有很熟悉 webpack ,當然是先找看看大家怎麽建立一個 webpack ,就這麼剛好給我找到了,就先來試看看了

這一篇會照着文章一路建立下去(當然沒有這麼順利,不然就沒有明天的文章了 XD )

參考資料 webpack 3 + phaser

  • 先建立一個空的資料夾
  • 進入資料夾後打開 shell ,下建立的指令(這邊如果不清楚的話就要好好的去稍微瞭解 webpack 了)
npm init
  • install phaser
npm install phaser --save
  • install 需要的套件與 plugins
npm install webpack webpack-dev-server raw-loader babel-loader babel-core babel-polyfill babel-preset-env html-webpack-plugin copy-webpack-plugin clean-webpack-plugin --save-dev
  • 都安裝完後,在資料夾內新增 webpack.config.js
//webpack.config.js 底下
const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
    entry: {
        app: ['babel-polyfill', path.resolve(__dirname, 'src', 'index.js')],
        vendor: ['phaser']
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: '[name].[chunkhash].js'
    },
    module: {
        rules: [
            { test: /\.js$/, include: path.join(__dirname, 'src'), loader: "babel-loader" },
            { test: [/\.vert$/, /\.frag$/], use: 'raw-loader' }
        ]
    },
    plugins: [
        new CleanWebpackPlugin('build'),
        new webpack.DefinePlugin({
            'CANVAS_RENDERER': JSON.stringify(true),
            'WEBGL_RENDERER': JSON.stringify(true)
        }),
        new HtmlWebpackPlugin({
            path: path.resolve(__dirname, 'build', 'index.html'),
            template: 'index.html'
        }),
        new webpack.HashedModuleIdsPlugin(),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor'
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest'
        }),
        new webpack.optimize.UglifyJsPlugin({
            comments: false,
            sourceMap: true
        }),
        new CopyWebpackPlugin([
            {from:path.resolve(__dirname,'assets'), to:path.resolve(__dirname, 'build', 'assets')}
        ])
    ]
}
  • 這時候先將檔案結構架好
    :::info
    | asset
    | node_modules
    | src
    | index.js
    index.html
    package.json
    package-lock.json
    webpack.config.js
    .babelrc
    :::
  • 在.babelrc下
{
    "presets": [
        "env"
    ]
}
  • 再來就是修改package.json
{
  "name": "phaser3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "phaser": "^3.1.0"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "clean-webpack-plugin": "^0.1.18",
    "copy-webpack-plugin": "^4.4.1",
    "html-webpack-plugin": "^2.30.1",
    "raw-loader": "^0.5.1",
    "webpack": "^3.11.0",
    "webpack-dev-server": "^2.11.1"
  }
}
  • 這時候就要測試一下能不能跑了
//src/index.js
const config{
    width:800,
    height:600,
    parent:'content'
}
var game = new Phaser.Game(config)
  • index.html下

<!DOCTYPE html>
<!--index.html-->
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Phaser Game</title>
  <style media="screen">
    html,
    body {
      margin: 0;
      padding: 0;
      text-align: center;
    }
  </style>
</head>

<body>
  <div id="content"></div>
</body>

</html>

如果已經建立到這邊,恭喜你,完成了第一步,因爲如果下 npm run dev ,你會發現你的東西跑不起來,但這邊就賣個關子明天再與大家一起解 bug 啦


上一篇
Day 9 關於scene
下一篇
Day 11 關於 webpack + phaser (後記)
系列文
關於你關於我關於phaser30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言