Day 10 關於 webpack + phaser （前傳）

2019 iT 邦幫忙鐵人賽

DAY 10

Modern Web

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

2019鐵人賽

kai

團隊好想工作室第二屆鐵人賽

2018-10-25 09:57:37

2639 瀏覽

分享至

前言...

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

這時候前端跨時代的發明就這麼出現啦： 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 啦