Cocos2d-x-js集成Webpack进行开发

相信大家在开发cocos2d-x-js项目时，经常会碰到一个让人头痛的问题就是需要不停在的project.json添加文件，模块化不合理，引用第三方的NodeJs库，等一系统的需求，那这里我们采用WebPack集成成Cocos2d-x-js项目，一举解决了上述问题：

• 第一步新建一个空项目,cocos new -l js -d c:\cocos HelloCocosJS
• 在项目的根目录下添加webpack.config.js文件，内容如下：

var webpack = require('webpack');
var _ = require('lodash');
var npmModules = require('./package.json').dependencies;
var vendorLibs = [];
if(npmModules) {
    _.each(npmModules,function (item,key) {
        vendorLibs.push(key);
    });
}


module.exports = {
    entry: {
        app: "./source/init.js",
        vendor: vendorLibs,
    },
    output: {
        path: __dirname+"/src",
        filename: "bundle.js"
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.js")
    ]
};

* 创建package.json文件，内容如下：

{
  "name": "HelloCocos2d-xJS",
  "version": "1.0.0",
  "description": "HelloCocos2d-xJS",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "lodash": "^3.10.1",
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.12.0"
  },
  "dependencies": {
    "lodash": "^3.10.1"
  }
}

• 修改project.json把里面的jsList内容换成下面的：

"jsList" : [
        "src/vendor.js",
        "src/bundle.js"
 ]

• 安装nodejs,然后安装webpack:npm install -g webpack
• 修改main.js，内容如下：

    cc.game.onStart = function(){
        app.start();
    };
    cc.game.run();  

• 新建文件夹resource,添加文件init.js,内容如下：

var res = require('./main/resources.js');
var MainScene = require('./main/mainscene.js');

var _ = require('lodash');

var g_resources = [];
_.each(res,function(item) {
    g_resources.push(item);
});

window.app = {}; // need a better way to expose a global game objecta

window.app.start = function() {
    if(!cc.sys.isNative && document.getElementById("cocosLoading")) //If referenced loading.js, please remove it
        document.body.removeChild(document.getElementById("cocosLoading"));

    // Pass true to enable retina display, on Android disabled by default to improve performance
    cc.view.enableRetina(cc.sys.os === cc.sys.OS_IOS ? true : false);

    // Adjust viewport meta
    cc.view.adjustViewPort(true);

    // Uncomment the following line to set a fixed orientation for your game
    // cc.view.setOrientation(cc.ORIENTATION_PORTRAIT);

    // Setup the resolution policy and design resolution size
    cc.view.setDesignResolutionSize(960, 640, cc.ResolutionPolicy.SHOW_ALL);

    // The game will be resized when browser size change
    cc.view.resizeWithBrowserSize(true);

    //load resources
    cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new MainScene());
        //cc.director.runScene(new ChipmunkScene());
    }, this);
};

• 在resource目录下新建main文件夹，在main文件夹下，新建resources.js文件，内容如下：

var res = {
    HelloWorld_png : "res/HelloWorld.png"
};

module.exports = res;

• 在main目录下，新建mainscene.js文件，内容如下：

var res = require("./resources.js");
var MainLayer = cc.Layer.extend({
    cocosNode:null,
    ctor:function () {

        this._super();
        var size = cc.winSize;

        var sprite = new Sprite(res.HelloWorld_png);
        addChild(sprite);
        return true;
    }
});


var MainScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new MainLayer();
        this.addChild(layer);
    }
});
module.exports = MainScene;

• 回到根目录，运行命令webpack，然后用VS运行项目。结果收工。