webpack 最早是德国开发者 Tobias Koppers 开发的一个module bundler,简单点说它就是一个为了模块管理而生的工具。
随着web富客户端趋势愈加明显，基于Commonjs和AMD规范的实现和ES6 modules实现的推进，js代码的管理尤为必要，也应运而生了很多模块化工具，如：
最早也是最有名的RequireJS；Twitter的Bower；能让服务器端的CommonJS格式的模块在浏览器端运行的Browserify和Express框架的作者TJ Holowaychuk开发的Component；还有在Component的基础上开发的，语法和配置文件与Component基本通用，并且借鉴了Browserify和Go语言特点的Duo。但是这些实现模块化的方法或多或少都有他们的缺点，如：
使用<script>标签导入js模块，顺序不好把握且需要梳理可能的冲突和依赖；使用Commonjs规范来解决问题，它使我们在服务器端的模块得到了重用，但是在浏览器端，网络的请求都是异步的，无法并行的require多个module。ES6 modules的实现也只是一小部分，并且想要得到所有浏览器的支持，相比还是需要相当的一段时间。webpack拥有哪些优点：
能替代grunt或者gulp大部分的功能，可以构建打包CSS，预处理CSS，编译JS和打包处理图片等等。以 commonJS 的形式书写脚本，对 AMD/CMD 的支持很全面，还支持Angular，ES6等模块化系统，方便旧项目代码迁移。扩展性强，插件机制完善，适应多变的需求。Loaders可以使文件在编译时得到预处理，代码分割，提供按需加载的能力。初始化项目并添加webpack依赖到package.json中：
通过npm init实例化package.json文件。通过npm install webpack --save-dev安装webpack到package.json文件中。或者通过npm install webpack@1.2.x --save-dev安装指定版本的webpack到package.json文件中。通过npm install webpack-dev-server --save-dev安装dev tools到package.json文件中，本地运行webpack服务。webpack有哪些命令？
webpack <entry><output> 配置编译入口文件和输出地址webpack 执行一次开发时的编译webpack -p 执行一次生成环境的压缩编译webpack --watch 在开发时持续监控增量编译（可配置）webpack -d 生成SourceMapswebpack --progress 显示编译进度webpack --colors 显示静态资源的颜色webpack --sort-module-by, --sort-chunks-by, --sort-asset-by 将modules/chunks/assets进行列表排序webpack --display-chunks 展现编译后的分块webpack --display-reasons 显示更多引用模块原因webpack --display-error-details 显示更多报错信息项目的根目录下必须配置 webpack.config.js ，它的作用如同常规的 gulpfile.js/Gruntfile.js ，就是一个配置文件，告诉 webpack 去做什么事情，如下例：
var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js'); module.exports = { //插件项 plugins: [commonsPlugin], //页面入口文件配置 entry: { index : './src/js/page/index.js' }, //入口文件输出配置 output: { path: 'dist/js/page', filename: '[name].js' }, module: { //加载器配置 loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.js$/, loader: 'jsx-loader?harmony' }, { test: /\.scss$/, loader: 'style!css!sass?sourceMap'}, { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} ] }, //其它解决方案配置 resolve: { root: 'E:/github/flux-example/src', //绝对路径 extensions: ['', '.js', '.json', '.scss'], alias: { AppStore : 'js/stores/AppStores.js', ActionType : 'js/actions/ActionType.js', AppAction : 'js/actions/AppAction.js' } } ;
从上例不难看出，webpack的配置其实主要就是对module.exports中的一些属性进行配置，这些属性包括：
entry（页面入口文件配置）output（入口文件输出配置）module（模块加载器配置）watch（持续监控增量配置）resolve（其它解决方案配置）plugins（第三方插件配置，很多插件官方文档介绍不全，可以到github上查找说明文档，如copy-webpack-plugin）devServer(webpack-dev-server代理服务配置) 对于以上配置可以参考详细的官方文档【更详细的内容，会后续更新】
