因爲開始找到了一些範例(之後會跟大家介紹),並自己實作後發現很好玩,很有野心的想要開始加東加西,發現怎麽這個程式的擴增性這麼受到限制,而且程式碼還越加越長,這樣到底怎麽辦呢?
這時候前端跨時代的發明就這麼出現啦: webpack!!
這兩天就會講一下我怎麽 webpack 的過程,今天會是事件篇,明天則是解決篇(絕對不是快生不出文章分成兩篇的)
說全部都是自己從頭開始建立也是錯的,畢竟沒有很熟悉 webpack ,當然是先找看看大家怎麽建立一個 webpack ,就這麼剛好給我找到了,就先來試看看了
這一篇會照着文章一路建立下去(當然沒有這麼順利,不然就沒有明天的文章了 XD )
npm init
npm install phaser --save
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 底下
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')}
])
]
}
{
"presets": [
"env"
]
}
{
"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)
<!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 啦