webpack介绍

简介

什么是模块打包？
粗俗一点来讲，模块打包就是把一小坨一小坨的代码粘成一大坨。
实际操作起来的时候当然还需要关注一些细节。

为什么要用模块打包？

理由：
我们在html网页编写中，需要引入外部js文件，现在基本都是js文件和html文件分离减少耦合性，加强可维护性。但js文件各自分离的话，比如：如果A.js 文件需要引入 jquery.js 时，就必须借助html文件<script>标签，引入到浏览器中，这样才能正常使用A.js。中间多出来这个步骤，增加了组件的复用性和可维护性成本，为代码编辑工作增加了不必要的劳动。

如果我们不通过浏览器，想达到不需要html的<script> 标签引入的效果，我们就必须手动将 jquery.js 的内容复制到A.js 文件中。在个手动复制的过程，是很枯燥无味的（在我看来很low）。这里就引出一个问题，谁能帮我们做这些操作。
答案是：node.js
node.js 的价值中最大的一个价值是，我们可以脱离浏览器的束缚，操作我们的js 文件，运行、修改、编辑等操作。所以大部分的前端框架基本上都依赖于 node.js。
借用node.js 模块打包工具就可以完成以上需要我们手工完成的操作。
当然，模块打包工具的不仅仅解决这个问题，他的运用途径还有N多种。
以上观点只是我为我使用模块打包工具的一个理由。

理由：
一般来讲，我们用模块化组织代码的时候，都会把模块划分在不同的文件和文件夹里，也可能会包含一些诸如React和Underscore一类的第三方库。
而后，所有的这些模块都需要通过<script>标签引入到你的HTML文件中，然后用户在访问你网页的时候它才能正常显示和工作。每个独立的<script>标签都意味着，它们要被浏览器分别一个个地加载。
这就有可能导致页面载入时间过长。
为了解决这个问题，我们就需要进行模块打包，把所有的模块合并到一个或几个文件中，以此来减少HTTP请求数。这也可以被称作是从开发到上线前的构建环节。
还有一种提升加载速度的做法叫做代码压缩（混淆）。其实就是去除代码中不必要的空格、注释、换行符一类的字符，来保证在不影响代码正常工作的情况下压缩其体积。
更小的文件体积也就意味着更短的加载时间。要是你仔细对比过带有 .min后缀的例如 jquery.min.js和jquery.js的话，应该会发现压缩版的文件相较之下要小很多（jquery-3.1.1.js 261KB， jquery-3.1.1.min.js 85KB）。
Gulp和Grunt一类的构建工具可以很方便地解决上述的需求，在开发的时候通过模块来组织代码，上线时再合并压缩提供给浏览器。

打包模块的方法有哪些？
如果你的代码是通过之前介绍过的模块模式来组织的，合并和压缩它们其实就只是把一些原生的JS代码合在一起而已。
但如果你使用的是一些浏览器原生不支持的模块系统（例如CommonJS 或 AMD，以及ES6 模块的支持现在也不完整），你就需要使用一些专门的构建工具来把它们转换成浏览器支持的代码。这类工具就是我们最近经常听说的Browserify, RequireJS, Webpack等等模块化构建、模块化加载工具了。
为了实现模块化构建或载入的功能，这类工具提供许多诸如在你改动源代码后自动重新构建（文件监听）等一系列的功能。
(打包 CommonJS;打包 AMD;Webpack;ES6 模块等)

Webpack 是当下最热门的前端资源模块化管理和打包工具。
它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。
还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。
通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
webpack已经是大部分前端项目打包工具的首选，grunt、glup、browserify等逐渐沦为辅助甚至完全被替代。在grunt、glup、browserify等已经相当火了之后，webpack长江后浪推前浪，把前辈们拍死在沙滩上，实力惊人。
根据GitHub上的迭代发展看来，通过Issues、Release、Commit等看，webpack发展相当不错，已经有2.2版本，最大的更新应该是支持ES6 Modules，根据ES6的特性来做一些Code Splitting等。

老式的任务运行器的方式：你的标记（html）、样式(css)和 JavaScript 是分离的。你必须分别管理它们每一个，并且你需要确保每一样都达到产品级任务运行器(task runner)，例如 Gulp，可以处理许多不同的预处理器(preprocesser)和转换器(transpiler)，但是在所有的情景下，它都需要一个输入源并将其压缩到一个编译好的输出文件中。然而，它是在每个部分的基础上这样做的，而没有考虑到整个系统。这就造成了开发者的负担：找到任务运行器所不能处理的地方，并找到适当的方式将所有这些模块在生产环境中联合在一起。

Webpack 试图通过提出一个大胆的想法来减轻开发者的负担：如果有一部分开发过程可以自动处理依赖关系会怎样？如果我们可以简单地写代码，让构建过程最终只根据需求管理自己会怎样？

Webpack 的方式：如果 Webpack 了解依赖关系，它会仅捆绑我们在生产环境中实际需要的部分.

如果你过去几年一直参与 web 社区，你已经知道解决问题的首选方法：使用 JavaScript 来构建。而且 Webpack 尝试通过 JavaScript 传递依赖关系使得构建过程更加容易。不过这个设计真正的亮点不是简化代码管理部分，而是管理层由 100% 有效的 JavaScript 实现（具有 Nodejs 特性）。Webpack 能够让你编写有效的 JavaScript，更好更全面地了解系统。

什么是 webpack？

webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。

http://images0.cnblogs.com/blog2015/561179/201507/161453372048661.jpg

图片.png

我们可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass），但我们无须在上面花费太多心思，因为 webpack 有着各种健全的加载器（loader）在默默处理这些事情，这块我们后续会提到。

webpack 的优势：

1） webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
2）能被模块化的不仅仅是 JS 了。
3）开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
4）扩展性强，插件机制完善。特别是支持 React 热插拔，的功能让人眼前一亮。