前端最强构建webpack-问题

曾经及目前最火的一款模块加载器打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。它就是webpack。我是从去年，也就是2016年做腾讯智推项目的时候第一次正式使用webpack，当时使用webpack做的项目构建，React做的项目架构，那年那次那是一波痛苦一波喜呀，想想，也充了不少血咯。哈哈，突然有点想聊聊React的冲动，还是回到今天写的主题webpack。写webpack文章是这个逻辑：知道为什么学习它到学会它的使用再到学会它的应用。

No1、为什么用webpack？

简单来说大概两个方面的原因：

一是因为我们需要使用模块化的机制来进行项目开发和管理。

二是因为我们需要使用ES6规则来写JS，需要使用如SCSS、LESS等预处理器来写CSS

而这些ES6规则和SCSS等类型文件的代码我们的运行环境又不认识，这个时候webpack挺身而出，说它聚成了能把这些浏览器不认识的东西转成它能解析的东西的能力。于是就试试，原来是它确实有这种能力，这样我们就可以愉快的玩ES6标准和像写JS一样使用预处理器写CSS。而不用担心运行环境是否认识它们了，因此，我们也就开始使用webpack。

No2、还记得Grunt、Gulp吗？

2013年，那会刚入职，到2014年做的第一个完整项目（时尚类），当时跟着一波大神搞了一段时间封闭，那会使用的就是Grunt做构建工具，之后回到工位，又发现了Gulp的简单方便，又立马将Gulp做为自己的基础项目构建工具，再后来有ES6的发展，CSS预处理的兴起，也就自然而然的使用起了webpack。怎么感觉写着写着有点跑题了，呵呵！这里应该是要谈谈这三者的区别。

一、有关上面两个带G开头的构建工具，个人认为脑子里需要有文件概念，用来处理文件的压缩、合并、测试等等。这两个的工作方式都是在一个配置文件（gruntfile.js、gulpfile.js）中，指明对某些文件进行类似编译，组合，压缩等。gulp的配置比grunt更简单更好理解。

二、有关webpack个人认为脑子里需要有模块的概念，为什么这么说呢？看一下官网提供的下面这张原理图：

原理图

webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），webpack将从这个文件开始找到你的项目的依赖文件，使用对应的loaders处理它们，最后打包成一个浏览器可识别的JavaScript文件。

No3、检测自己是否要继续学习webpack

先看下面这个webpack的配置文件，如果每一项你都懂，那接下来几天里我要写的内容能带给你的收获也许就比较有限了。

常规配置

No4、怎么来写有关webpack的知识？

对，一个构建工具而已，可以讲的不多，如果你是很懂的话，那我写的可都是废话，我只想把这些废话写的更深入更直白点，就如先搞懂你要学习的东西是个什么，它在前端界到底有何存在意义以及为什么要去学习它，再学会使用，最后学会应用，按这个逻辑走，所以有关webpack会有三篇，分别是：
一、前端最强构建webpack-问题
二、前端最强构建webpack-使用
三、前端最强构建webpack-应用（结合React）

总结

努力只是想过的更好罢了