本指南由TooBug根据自己的理解和使用经验编写，初衷是为了方便国内的前端开发者更好地接触和使用webpack这个强大的前端打包工具。

希望这个教程可以使Webpack易学。

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescr...

webpack 是基于 node 的模块打包工具，可以让使用者以 CommonJS 或 ES6 Module 语法编写JS代码，最终构建成可在浏览器运行的代码。

可能会有人问webpack到底有什么用, 你不能上来就糊我一脸代码让我马上搞, 我照着搞了一遍结果根本没什么naizi用, 都是骗人的. 所以, 在说webpack之前, 我想先谈一下前端打包方案这几年的演进历程, 在什么场景下, 我们遇到了什么问题, 催生出了应对这些问题的工具. 了解了需求和目的之后, 你就知道什么时候webpack可以帮到你. 我希望我...

webpack是一个批量，公正，灵活，可扩展，开源的打包工具。webpack 使用异步 I/O 和多层缓存，从而运行得很快，尤其是增量构建。

之所以写这个教程，是因为之前自己自学webpack的时候，遇到了很多阻碍，首先是官网全英，api对我来说写得也模模糊糊的，当然官方文档很详细，但对于初学者来说学习成本就比较高了。在google搜索出来的一大堆所谓的webpack教程要么就是直接丢给你一份作者已经配置好的配置文件，要么就是单独跟你讲某个配置参数的作用（感觉就是把官网的英文纯粹翻译成中文而已），...

webpack 更新到了 4.0，官网还没有更新文档。因此把教程更新一下，方便大家用起 webpack 4。

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个 bundle。

最详细，最简单的零基础 webpack 3 入门教程，人人都能学会。