Webpack 是德国开发者 Tobias Koppers 开发的模块加载器，Instagram 工程师认为这个方案很棒, 似乎还把作者招过去了。在 Webpack 当中, 所有的资源都被当作是模块, js, css, 图片等等。因此, Webpack 当中 js 可以引用 css, css 中可以嵌入图片 dataUrl。对应各种不同文件类型的资源, Webpack 有对应的模块 loader。
Webpack的产生是跟随着NodeJS的脚步，现在自动化是一个新的开发模式， 过去前端开发需要本地安装 服务器，对于不熟悉 服务器的前端开发人员配置服务器是一个非常困难的事情。Webpack可以解决这个问题，不需要安装服务器，只需要配置 相关的文件，安装依赖就可以搭建一个本地的服务器。
二、Webpack的作用
1、文件的合并和压缩
提到网站的性能优化大家可能会想到很多的方法，例如：js文件合并压缩、css文件的合并压缩、图片的雪碧、html页面的压缩等，但是这些方法都需要通过第三方工具实现，实现 起来非常的麻烦。通过Webpack就可以 很轻松的实现这些功能。
2、js文件模块化
CommonJS 与 AMD 支持
Webpack 对 CommonJS 的 AMD 的语法做了兼容, 方便迁移代码。不过实际上, 引用模块的规则是依据 CommonJS 来的
require('lodash') // 从模块目录查找
require('./file') // 按相对路径查找
AMD 语法中, 也要注意, 是按 CommonJS 的方案查找的
define (require, exports. module) -> require('lodash') # commonjs 当中这样是查找模块的 require('./file')
三、WebPack的特点
-
将依赖树拆分，保证按需加载
-
保证初始加载的速度
-
所有静态资源可以被模块化
-
可以整合第三方的库和模块
-
可以构造大系统
-
丰富的插件，方便进行开发工作
-
大量的加载器，包括加载各种静态资源
-
代码分割，提供按需加载的能力
-
发布工具
四、WebPack的优势
webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。 能被模块化的不仅仅是 JS 了。 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。 扩展性强，插件机制完善，特别是支持 React 热插拔。