### webpack 是什么？ * 模块加载器 * 打包工具 把依赖模块的js 文件、CSS样式文件以及图片等打包成静态的资源。  ### webpack的作用 将依赖模块转换成代表这些包的静态文件。其可以做到： * 按需加载依赖模块， 好处包括： - 易管理 - 提升性能，特别是在大型项目 * 方便整合第三方库 #### 为什么需要webpack这样的工具 问题： 一个项目页面如果包含很多js库，比如jQuery 、jQuery UI等等，在浏览器端访问的时候，需要将这些JS和CSS文件下载到本地。文件越多，需要传输的事件就越长，页面载入的速度就越慢，于是，第一次优化： 优化： 减少传输文件的数量。 尽可能将资源合并到一个主文件中， 比如将所有的js合并到app.js中 ***** 问题： 文件的数量是少了，但是合并的文件的size比较大，以早期Ext JS为例， 单个文件超过了1M多，单个文件传输还是会耗费较长时间 优化：删除不必要的注释，压缩文件。压缩JS／CSS　类型文件的工具也很多比如雅虎开发的YUI Compressor。 ***** 问题： 虽然上面的方式已经改善了一点，但是进入第一个页面就需要加载所有的资源， 某些资源当前这个页面可能完全不需要，完全可以在下个页面再载入。 另外， 某些库之间有依赖关系，不同版本存在不兼容的问题，在大型项目，维护和跟踪模块之间的关系就变得很困难。 终极优化： webpack这样的依赖管理和模块打包系统。 ### webpack同类型工具 ### 参考地址 官方网址： [https://www.webpackjs.com/](https://www.webpackjs.com/) 文档地址： [https://www.webpackjs.com/concepts/](https://www.webpackjs.com/concepts/)