webpack就是一个打包工具，可以将多个js、css、图片、coffeescript、less等合并在一起，在调用时就加载一条js文件就行。
推荐同时全，局部安装
npm install -g webpack npm install webpack
安装完成后
webpack -h //有提示说明安装完成
假如网站的目录结构是这样：
在根目录手动创建webpack.config.js
var webpack = require('webpack'); // 加载webpack模块是为了能使用，其内置的插件如BannerPlugin
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin"); //将公共部分JS提取出来独立为一个JS
var autoprefixer = require('autoprefixer'); //自动添加css前缀 npm install autoprefixer
module.exports = {
entry: './entry.js', //文件入口，所有的css、js、图片和模块都统一加载在此文件。
output: {
path: __dirname+'/out/', //压缩合并输出后存放的目录
filename: 'bundle.js', //文件出口，压缩合并后文件的名字
libraryTarget: 'amd' // 输出后的文件bundle.js变成amd模块，就可以在requirejs插件中直接引入使用了
},
module: { //压缩合并js以外的内容，如css、图片、coffeescript、less等对应的还要安装相应的模块
loaders: [
//如果希望css和跟js一样统一压缩到一起就需要额外安装 npm install css-loader style-loader postcss-loader
{test: /\.css$/, loader: "style-loader!css-loader!postcss-loader"} //webpack要识别处理css要依赖模块才行，多个模块之间要使用!
//limit=8192”表示将所有小于8kb的图片都转为base64形式，在out目录下生成大于8KB的img图片
//（其实应该说超过8kb的才使用 url-loader 来映射到文件，否则转为data url形式）
//npm install url-loader npm install file-loader
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192&name=img/[hash:8].[name].[ext]'}
]
},
postcss: [ autoprefixer({ browsers: ['> 0%'] }) ], //自动添加css前缀
plugins: [ //扩展webpack额外的功能，要使用webpack自带插件就引入webpack，其他功能的话就额外安装其他插件
new webpack.BannerPlugin('这个插件功能是头部提示功能'),
new CommonsChunkPlugin("commons.js", ["js1", "js2", "js3"]), //js1.js js2.js js3.js公共部分独立出来取名为commons.js
new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}}), //webpack自带的压缩代码功能
new webpack.ProvidePlugin({ //使用sudo npm install jquery@1.11.0，来调用jq,并将jq暴露打包文件全局中，相当于给window加了jquery
$:"jquery",
jQuery:"jquery",
"window.jQuery":"jquery"
}),
new webpack.NoErrorsPlugin(), //不提示报错信息
new webpack.optimize.DedupePlugin() //避免加载重复模块
],
resolve: {
//查找module的话从这里开始查找
root: 'E:/github/flux-example/src', //绝对路径
//自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
extensions: ['', '.js', '.json', '.scss'],
//模块别名定义，方便后续直接引用别名，无须多写长长的地址
alias: {
AppStore : 'js/stores/AppStores.js',//后续直接 require('AppStore') 即可
ActionType : 'js/actions/ActionType.js',
AppAction : 'js/actions/AppAction.js'
}
},
watch: true //每次修改文件，就不需要次次都执行webpack了，或者webpack --watch
}
入口文件：
//entry.js
if(!Function.prototype.bind){
Function.prototype.bind = function(){
var fn = this,
args = [].slice.call(arguments),
object = args.shift();
return function(){
return fn.apply(object,args.concat([].slice.call(arguments)));
};
};
}
if (!Array.prototype.filter){
Array.prototype.filter = function(fun /*, thisp*/){
var len = this.length;
if (typeof fun != "function")
throw new TypeError();
var res = new Array();
var thisp = arguments[1];
for (var i = 0; i < len; i++){
if (i in this){
var val = this[i]; // in case fun mutates this
if (fun.call(thisp, val, i, this))
res.push(val);
}
}
return res;
};
}
//以上判断是为了兼容ie8
require("./style.css");
require("./style1.css");
//require("jquery"); 在使用webpack中要使用jq推荐使用sudo npm install jquery@1.11.0，来使用
require('./module1')
其他模块（js,css,图片等等都视为模块）
// 1.html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="./out/bundle.js"></script> </head> <body> <div id="big"></div> <div id="lititle"></div> </body> </html>
//module1.js
$(function () {
document.title=$().jquery;
});
//style.css
body{background: yellow}
//style1.css
div{border: 5px solid red;}
#big{height: 500px;width: 800px}
#lititle{height: 100px;width: 100px}
准备工作好了之后 在根目录下输入
webpack //系统会默认去找webpack.config.js配置文件 webpack // 最基本的启动webpack的方法 webpack -w // 提供watch方法；实时进行打包更新 webpack -p // 对打包后的文件进行压缩 webpack -d // 提供source map，方便调式代码 webpack --config webpack.config.js //单独运行webpack.config.js文件，这种情况可以是在运行多个项目的时候使用 webpack --watch -webpack.config.js //时时监听文件更新运行webpack方法
成功运行的提示都这样
此时目录下生成了一个js文件如：
1.html页面只要加载了这个bundle.js就相当于加载了css,js,图片所有的资源了
发布服务器
webpack还提供了本地发布测试的功能，一旦修改了文件就自动压缩合并和页面自动刷新，并且还提供了类似iis、apache发布的功能。
参考学习网站：
http://zhaoda.net/webpack-handbook/preface.html
http://www.w2bc.com/Article/50764
http://blog.csdn.net/yczz/article/details/49250623