webpack承担了哪些工作？原理？功能？

Question

如题
webpack承担了哪些工作？原理？功能？
最好是用通俗易懂的语音

Answer 1

1. 依赖管理：方便引用第三方模块、让模块更容易复用、避免全局注入导致的冲突、避免重复加载或加载不需要的模块。

2. 合并代码：把各个分散的模块集中打包成大文件，减少HTTP的请求链接数，配合UglifyJS可以减少、优化代码的体积。

3. 各路插件：babel把ES6+转译成ES5-，eslint可以检查编译期的错误……

原理：最简单地说，就是分析代码，找到require、exports、define等“关键词”，并替换成对应模块的“引用”……

Answer 2

webpack主要就是模块化、处理依赖 和 打包-

举例来说。。我有个index.html

上面要引用一大堆JS/CSS文件，main.css、other.css、entry.js、a.js、b.js、c.js...

现在没有webpack,
   a.js要调用b.js里的一个函数，所以a.js要放在b.js的后面
   c.js又要调用b.js里的一个变量，c又要放b后面
   b.js又要使用某个js里的数据。。。
有上百个js的时候，你要手动处理它们的关系你会立马死翘翘...搞错一个就完蛋

现在我有了webpack

webpack的理念就是一切皆模块，把那一大堆css,js在我的一个总入口文件require引入，剩下的事情？webpack会自动处理，包括所有模块的前后依赖关系打包压缩合并成一个js、公共代码抽离另外成为js、某些你指定的js单独打包...这些模块可以是css/JS/图片/字体。。等等等等

配合插件webpack还能做的事随便举例：

1、根据模板生成html,并且自动处理上面的css/JS引用路径
2、自动处理img里图片路径，css样式中背景图的路径。。。字体引用
3、开启本地服务器，变写代码边自动更新页面内容
4、编译jsx、es6、sass、less、coffeescript等等并添加md5、sourcemap等辅助
5、异步加载内容，比如弹出框，不需要时不加载到dom
6、配合vue.js、react等框架开发等。。
......

Answer 3

webpack的功能在回答中已经提及了

我再来补充几点吧：）

原理：
一切皆为模块，由于webpack并不支持除.js以外的文件，从而需要使用loader转换成webpack支持的模块，plugin用于扩展webpack的功能，在webpack构建生命周期的过程在合适的时机做了合适的事情。

先了解一下Webpack从构建到输出文件结果的过程：
1.解析配置参数，合并从shell传入和webpack.config.js文件的配置信息，输出最终的配置信息
2.注册配置中的插件，好让插件监听webpack构建生命周期中的事件节点，做出对应的反应
3.解析配置文件中entry入口文件，并找出每个文件依赖的文件，递归下去
4.在递归每个文件的过程中，根据文件类型和配置文件中loader找出相对应的loader对文件进行转换
5.递归结束之后得到每个文件最终的结果，根据entry配置生成代码chunk
6.输出所有chunk到文件系统

具体的如何配置，推荐一篇文章：http://array_huang.coding.me/...

Answer 4

承担了很多前端代码的自动化生成的工作。
搭配很多loader，可以完成不同的事情。
比如说把繁杂的项目中用到的js打包并压缩成你设定的一个或多个文件去发布到生产环境。
比如把react中引用的图片压缩并抽出来项目中引用到的。没引用到的，不会拿过来。
比如CSS Modules，单个组件开发时用单独的css定义，最终打包成一个css文件里，而没用到的css不会打包。而且通过设置，不用担心各个文件中的同名css打包到一个css里后重复。
less转css
sass转css
PostCSS转css
es6写的js，通过babel转成浏览器可执行的es5
......

原理，其实就是用程序代替人的工作。比如我们开发的时候经常是css写到一个或几个文件，随着迭代，里面肯定就产生很多垃圾不再用的代码，而用人去识别很累，如果用CSS Modules，把css也模块化，随着迭代，不再引用到的，就不会再打包进去，不用人来识别了。同理，浏览器是不识别sass这种的，程序来帮你转成浏览器可读的css。
不管用什么程序，其实都可以开发这样的一个解释器，其实就是一个翻译转化的过程。只不过当前前端的发展需要和node的便捷加上npm方便的分发，所以在node中，大量的工具出现了。

其实原理和功能，就是用程序代替人做那些事，由程序翻译成普通浏览器可执行的代码。