一、webpack简介

Webpack 是前端资源模块化管理和打包工具

Webpack 是当下最热门的前端资源模块化管理和打包工具。 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。

以下所有内容都是针对webpack3.x版本进行的研究和分析！

一、webpack的简介

1.1 webpack是什么

本质上，webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

• 模块化，让我们可以把复杂的程序细化为小的文件，便于公用；
• WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Less，ES6等），并将其打包为合适的格式以供浏览器使用。
• Webpack 是一个前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

1.2 webpack与gulp、browserify的关系

（1）webpack与gulp本质不同

• 其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。
• Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。
• Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

（2）webpack与gulp相同点

• webpack与gulp相同点：让各类语言变成浏览器可识别的语言。
• Webpack的处理速度更快更直接，能打包更多不同类型的文件。

（3）webpack与gulp区别总结

• 无可比性，不过webpack的优点使得webpack可以替代gulp/grunt类的工具。无可比性，不过webpack的优点使得webpack可以替代gulp/grunt类的工具。
• 如果实在要把二者进行比较，webpack的处理速度更快更直接，能打包更多不同类型的文件。

（4）webapck是一种js模块化解决方案

• seajs/requirejs：一个在线”编译” 模块的方案。相当于在页面上加载一个 CMD/AMD 解释器，让浏览器识别 define、exports、module 这些东西，也就实现了模块化。
• webpack/browserify ：一个预编译模块的方案。这个方案更加智能。预编译，本地直接写js。不管是 AMD / CMD / ES6 风格的模块化，它都能认识，并且编译成浏览器认识的JS。

（5）webpack与browserify、gulp三者之间的关系

• gulp是一个工具，旨在规范前端开发流程。
• webpack是模块化方案，更加强调模块化开发。
• gulp也可以配置seajs、requirejs甚至webpack的插件。

1.3 Webpack应用场景

（1）疑问

• webpack只适合前后端分离的项目结构吗？
• webpack适合多页面的项目构建吗？

（2）解答

• webpack跟前后端分离没关系。只要配置得到，可以实现前后端分离。
• 适合多页面的项目构建。

（3）应用

• 常用于vue和react等项目中，需要了解；
• 可用处插件开发，进行模块处理。

1.4 webpack的特性

• webpack能更好的落实到业务，提高开发效率

• 一切皆模块，即代码分割：
  • 正如js文件可以是一个“模块（module）”一样，其他的（如css、image或html）文件也可视作模 块。因此，你可以require('myJSfile.js')亦可以require('myCSSfile.css')。这意味着我们可以将事物（业务）分割成更小的易于管理的片段，从而达到重复利用等的目的。
• 按需加载，懒加载：
  • 传统的模块打包工具（module bundlers）最终将所有的模块编译生成一个庞大的bundle.js文件。但是在真实的app里边，“bundle.js”文件可能有10M到15M之大可能会导致应用一直处于加载中状态。因此Webpack使用许多特性来分割代码然后生成多个“bundle”文件，而且异步加载部分代码以实现按需加载。
• 同时可以用到nodejs中的require和export等语法，快速便捷。

huangh 20170726 -20180115