webpack的优点
代码拆分
webpack有两种组织代码的方式 一种是同步一种是异步。异步依赖作为分割点，形成一个新的块。在优化过了依赖树后，每一个异步区块都作为一个文件被打包。
loader
webpack 本身只处理原生的js,但是loader转化器可以将各种资源转换成为js模块。这样任何资源都可以成为 webpack的处理对象。比如处理css的cssloader,处理coffeescript coffeesecriptloader。
智能解析
webpack是一个智能解析器，可以处理几乎任何第三方的库，无论他们的模块形式是commonjs，amd 还是普通的js文件。甚至加载依赖的时候可以动态表达式
require("./templates/" + name + ".jade")
插件系统
webpack有丰富的插件系统。大多数的功能都可以通过这个插件系统运行。还可以开发和使用开源的webpack的插件，来满足各式各样的需求。
安装
首先要安装 Node.js， Node.js 自带了软件包管理器 npm，Webpack 需要 Node.js v0.6 以上支持，建议使用最新版 Node.js。
用 npm 安装 Webpack：
$ npm install webpack -g
此时 Webpack 已经安装到了全局环境下，可以通过命令行 webpack -h
试试。
通常我们会将 Webpack 安装到项目的依赖中，这样就可以使用项目本地版本的 Webpack。
进入项目目录,确定已经有 package.json，没有就通过 npm init 创建安装 webpack 依赖
npm install webpack --save-dev
Webpack 目前有两个主版本，一个是在 master 主干的稳定版，一个是在 webpack-2 分支的测试版，测试版拥有一些实验性功能并且和稳定版不兼容，在正式项目中应该使用稳定版。
查看 webpack 版本信息
$ npm info webpack
如果需要使用 Webpack 开发工具，要单独安装：
$ npm install webpack-dev-server --save-dev
loader
webpack本身只处理javascript, 如果要处理其他的类型要引用不同的loader。
1.loader可以以管道的方式连接
2.同步或者异步执行
3.接受参数
4.运行在nodejs的环境中，所以可以做任何的事情
5.loader可以通过文件扩展名（或正则表达式）绑定给不同的文件
6.loader通过npm安装
7.loader可以访问配置
8.可以require引用模块的时候使用，也可以在webpack的全局配置中指定，还可以通过命令行来执行。
9.插件可以使loader具有更多的属性
通过require来使用loader
例如引用一个css文件
/*style.css*/
body {
background: #fef;
}
require('style!css! ./style.css');//载入css文件
安装loader
npm install css-loader style-loader
通过命令行来指定配置
webpack entry.js bundle.js --module-bind 'css=style!css'
webpack配置文件
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: { path: __dirname, filename: 'bundle.js' },
module: {
loaders: [ {test: /\.css$/, loader: 'style!css'}
]
}
}
默认webpack.config.js
这样就直接执行webpack就好了，css文件就直接调用好了
require('./style.css');
plugin
插件可以完成更多loader不可以实现的功能。
webpack内置了很多的插件，这里我们利用webpack的BannerPlugin,这个插件的作用是给输出文件添加注释头。
具体配置如下：
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
}，
module: {
loaders: [
{test: /\.css$/, loader: 'style!css'}
]
},
plugins: [
new webpack.BannerPlugin('这是一个注释头')
]
}
webpack的开发环境
当项目逐渐变大了，webpack的时间会越来越长，通过参数可以让编译的内容带颜色和进度。
webpack --progress --colors
每次修改都需要编译，可以开启监听模式，那么每次更改自动更新。
webpack --progress --colors --watch
当然，使用 webpack-dev-server
开发服务是一个更好的选择。它将在 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。
npm install webpack-dev-server -g
运行
webpack-dev-server --progress --colors
