webpack是一个打包器。当别人问你的时候，你也可以这么回答，哪怕彼此都不知道说了什么。但是看了我的介绍，你就知道打包器是啥了。实际上webpack存在的最初动机就是要把node.js的模块能力让客户端可以用。所以，让我们从node的从一个模块案例开始。
令前端开发垂涎的案例
文件b引出一个函数b:
// b.js
exports.b = function b(){
console.log("b")
}文件a引入此模块，并调用模块的引出函数b：
// a.js
var b = require("./b.js")
b.b()
调用并查看输出：
$node a.js
b前端开发的福音：webpack
这样的开发套路（引入一个模块，使用它）实在太过常见，以至于不需要额外的解释。然而，这么简单好用的模块能力，在前端并不存在！但是现在有了webpack就可以了，要做的就是使用webpack对以上代码做一个转义：
$webpack a.js magic.js
然后，使用html引入它：
<html>
<body>
<script type="text/javascript" src="magic.js"></script>
</body>
</html>
打开浏览器访问此文件，就可以看到在浏览器的控制台内输出了b。
模块是一个古老的分而治之的技术，从结构化编程范式开始就有了。然而js在语言层面，在客户端是不支持的，它必须靠外在的html标签<script>来实现粗浅的，仅仅能用的模块。另外一个方面，js因为语言的柔性，却是有可能实现自己的相对更好的模块，包括变量和函数的局部化等。你可以阅读下文件magic.js，魔法都在其中，但是要看懂，需要你弄明白js模块技术。可以参考阮一峰的系列文章。文后附有搜索词。
实践考量
当然，更好的习惯是做一个配置文件
// webpack.config.js
module.exports = {
entry: './a.js',
output: {
filename: 'bundle.js'
}
};
有了它，程序员就不必每次敲入webpack a.js magic.js,而只要webpack即可。配置文件略啰嗦，但是可以看出来就是替代了本有的webpack的命令行参数，然后各就各位。当执行webpack时：
$ webpack
Hash: ed9f2c850698ca3d8863
Version: webpack 1.13.1
Time: 51ms
Asset Size Chunks Chunk Names
bundle.js 1.55 kB 0 [emitted] main
[0] ./a.js 31 bytes {0} [built]
[1] ./b.js 45 bytes {0} [built]
输出表明a文件，和它引入的b文件，都已经被转译完毕。转译到bundle文件内。
关于
作者：刘传君
创建过产品，创过业。不好动，读书机器。
可以通过 1000copy#gmail.com 联系到我
出品
http小书 http://www.ituring.com.cn/boo...
Git小书 http://www.ituring.com.cn/boo...
参考文献的搜索词
Minimal but complete AMD implementation
Javascript模块化编程（三）：require.js的用法
Writing Modular JavaScript With AMD, CommonJS & ES Harmony
Immediately-Invoked Function Expression (IIFE)
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。