前面的话
在webpack出现之前，市面上已经存在的模块管理和打包工具并不适合大型的项目，尤其单页面 Web 应用程序。最紧迫的原因是如何在一个大规模的代码库中，维护各种模块资源的分割和存放，维护它们之间的依赖关系，并且无缝的将它们整合到一起生成适合浏览器端请求加载的静态资源。webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载
webpack的内容丰富且杂乱，对于新手并不友好。本文以一个实例的形式，对webpack的重要概念进行介绍，并着重说明如何使用webpack
概述
webpack是一个模块打包器。
【特点】
webpack有以下特点
代码拆分
webpack 有两种组织模块依赖的方式，同步和异步。异步依赖作为分割点，形成一个新的块。在优化了依赖树后，每一个异步区块都作为一个文件被打包。
Loader
Webpack 本身只能处理原生的 java script 模块，但是 loader 转换器可以将各种类型的资源转换成 java script 模块。这样，任何资源都可以成为 Webpack 可以处理的模块。
智能解析
Webpack 有一个智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候，允许使用动态表达式 require("./templates/" + name + ".jade")。
插件系统
Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的，还可以开发和使用开源的 Webpack 插件，来满足各式各样的需求。
快速运行
Webpack 使用异步 I/O 和多级缓存提高运行效率，这使得 Webpack 能够以令人难以置信的速度快速增量编译
【安装】
用 npm 安装 Webpack
一个常见的问题是：安装webpack后，无法使用webpack命令
这是因为只进行了本地安装，没有全局安装，输入如下代码进行全局安装后即可运行
使用
首先创建一个静态页面index.html和一个JS入口文件entry.js
<!-- index.html -->
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
// entry.js
document.write('It works.')
然后编译 entry.js 并打包到 bundle.js：
$ webpack entry.js bundle.js
打包过程会显示日志：
Hash: f47511e706e3de8f2417
Version: webpack 2.6.1
Time: 47ms
Asset Size Chunks Chunk Names
bundle.js 2.66 kB 0 [emitted] main
[0] ./entry.js 27 bytes {0} [built]
用浏览器打开 index.html 将会看到 It works.
接下来添加一个模块 module.js 并修改入口 entry.js：
// module.js
module.exports = 'It works from module.js.'
// entry.js
document.write('It works.')
document.write(require('./module.js')) // 添加模块
重新打包 webpack entry.js bundle.js 后刷新页面看到变化 It works.It works from module.js.
Hash: 09733456f2c5b24a4845
Version: webpack 2.6.1
Time: 61ms
Asset Size Chunks Chunk Names
bundle.js 2.83 kB 0 [emitted] main
[0] ./module.js 43 bytes {0} [built]
[1] ./entry.js 75 bytes {0} [built]
Webpack会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 entry.js 中的代码，其它模块会在运行 require 的时候再执行
Loader
Webpack 本身只能处理 java script 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。详细信息移步至此
接上面的例子，我们要在页面中引入一个CSS文件style.css，要使用require("!style-loader!css-loader!./style.css")代码，代码读取顺序从右向左，表示首页将 style.css 也看成是一个模块，先加载style.css，然后用 css-loader 来读取它，再用 style-loader 把它插入到页面中
/* style.css */
body { background: yellow; }
修改 entry.js：
require("style-loader!css-loader!./style.css")
document.write('It works.')
document.write(require('./module.js'))
安装 loader：
npm install css-loader style-loader
重新编译打包，刷新页面，就可以看到黄色的页面背景了
如果每次 require CSS 文件的时候都要写 loader 前缀，是一件很繁琐的事情。我们可以根据模块类型（扩展名）来自动绑定需要的 loader。
将 entry.js 中的 require("!style-loader!css-loader!./style.css") 修改为 require("./style.css") ，然后执行
$ webpack entry.js bundle.js --module-bind 'css=style-loader!css-
