webpack和browserify用法 - pod4g/tool GitHub Wiki

这两种技术都是使用按需加载的模块化的思想来开发项目，让我可以按照node的require模块的方法写前端代码。。两者用法、思想相差不大

1.webpack的安装及使用方法

安装webpack： npm install -g webpack

安装好之后，写一个index.js文件在内部写入：

  var $ = require('./jquery');
  var echarts = require('./echarts');

写好之后编译：

 webpack index.js bundle.js

在页面引入的是bundle.js

 <script type="text/javascript" src="js/bundle.js"></script>

2.browserify的安装及使用方法

安装browserify：

npm install -g browserify

安装好之后，写一个index.js文件在内部写入：

  
   var $ = require('./jquery');

   var echarts = require('./echarts');

写好之后编译：


browserify index.js > bundle.js

在页面引入的是bundle.js

 <script type="text/javascript" src="js/bundle.js"></script>

test.js：

module.exports = function(n){
    console.log( n || "hello");
}

引入：

var $ = require('./jquery');
var echarts = require('./echarts');
var sayHello = require('./test');
sayHello(); // hello
sayHello('李彦峰');// 李彦峰

下一步学习怎么和grunt或gulp结合起来，监控文件变化，自动实现编译！！