介绍 <李> 。
├──经销
│,,├──,index . html
│,,├──,game.min.js
│,,└──,资产
│,,,,└──,bunny.png
├──src
│,,├──,index . html
│,,├──,资产
││,还以为;,└──,bunny.png
│,,└──,js
│,,,,├──,main.js
│,,,,└──,scene.js
├──gulpfile.js
├──package.json
├──webpack.common.js
├──webpack.dev.js
└──webpack.prod。js <李> <李> {
,“name":,“pixi-webpack-demo"
,“version":,“1.0.0"
,“description":“make pixi.js game with webpack 以及gulp"
,“main":“src/js/main.js",
,“keywords":,“pixi.js",“webpack"),
,“author":,“yulijun"
,“license":,“MIT"
,“dependencies": {
“pixi.js"才能:,“^ 5.2.1"
,}
} & lt; html>
,& lt; head>
& lt;才能title> pixi-webpack-demo</title>
,& lt;/head>
,& lt; body>
,& lt; canvas id=皊cene"祝辞& lt;/canvas>
& lt; !——,才能注意这里的game.min.js文件,稍微在“引入webpack”步骤详细解释它——比;
& lt;才能script 类型=拔谋?javascript", src=https://www.yisu.com/zixun/game.min.js“charset=" utf - 8 ">
这篇文章主要介绍怎么使用webpack搭建pixi。js开发环境,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<强>前提
需要会简单使用nodejs,了解包。json,会简单使用npm init, npm安装,npm运行命令。
<李>需要稍微了解webpack和吞咽。
<李>需要有google chrome浏览器。
<李>最好会一点git,演示项目pixi-webpack-demo托管在github上,通过切换不同分支演示一步一步项目的构建过程,现在把项目克隆下来吧。
为了更容易理解,这里先贴出来项目最终的目录结构
<>强构建环境
nodejs:需要节点环境,前端项目现在基本都是基于节点项目创建的,节点的包管理系统和工具链很方便。
<李>git:非必须,看演示时候切分支用。
<强>初始化项目
运行git checkout init切换到init分支即可看到这一步的示例。
创建目录pixi-webpack-demo,在pixi-webpack-demo根目录下运行npm init命令初始化项目,按照提示输入项目信息,完成后生成一个包。json文件。
<李>运行npm安装,节省pixi.js安装依赖。
<李>完成上面两步,包。json文件如下所示:
创建文件src/索引。html。