webpack是什么，为什么要用webpack，webpack如何使用

webpack是什么？

WebPack是前端资源模块工具，主要分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
webpack配置文件是webpack.config.js，整个文件遵循commonJS规范，所以可以使用，require、module.exports等语法。

为什么要用webpack

现在很多网站其实是功能丰富的应用，他们有一堆复杂的javascript代码，和依赖包，less、sass、jsx、es6、.vue（vue文件）、.jsx(react文件)等方便快捷开发的技术，当然这些浏览器是不能直接解析的，而手动处理又非常繁琐。这时模块化打包工具webpack出现了，他能帮助我们：

1. webpack可以根据模板生成HTML，并自动处理上面的css/js引用路径。
2. webpack可以自动处理里面的图片路径，css里面背景图的路径，字体引用
3. webpack可以开启本地服务器，一边改写代码，一边自动更新页面内容
4. webpack可以编译jsx es6 sass less coffescript等，并添加md5、sourcemap等辅助
5. webpack可以异步加载内容，不需要时不加载到DOM
6. webpack可以配合vue.js和react.js等框架开发。

webpack如何使用