为什么使用webpack

1. 作用域污染问题 传统开发中，框架的引入通常会在window绑定特殊的变量，如jq绑定的window.$,lodash绑定的window._ 如果引入的框架太多，或者开发中我们自己绑定在window上的变量太多，会导致全局变量臃肿，多人开发时会容易出现问题
2. 文件太大 引入的文件过多过大时，我们的页面可能在初次加载的时候会出现白屏，这是可能是由于网络加载大文件时过慢导致的，对用户体验不好
3. 可读性弱，可维护性差 如果所有代码都处于同一个文件下，那么对于我们程序员来说，二次开发是灾难性的

解决以上问题

1. 使用立即调用函数表达式 IIFE （Immediately Invoked Function Expressions）解决作用域问题，但是这样有一个问题，就是在修改是时候如果我们只改变一小部分代码，而我们必须加载整个js文件，并且会引入不必要的部分，所以我们需要将代码拆分，然后按需加载。

2. NodeJS的CommontJS就能为我们提供了这样的功能，在模块tool.js文件中使用module.export={}导出对应的函数或者变量，在使用时只要require('./tool.js')引入即可，但是这不能在浏览器中运行，而只能在node的环境下

3. RequireJS可以让我们在浏览器实现模块拆分，在模块tool.JS文件中使用define([], function(){ return fn})导出，再用require(['tool.js'], function(fn){//业务代码，fn为模块函数})引入即可，但是相对CommonJS来说较为繁琐

4. ESModule同样可以，export default导出，import导入，目前支持不完整

最后就是我们的webpack，算是比较全面的打包构建工具了，不仅支持打包拆分ESModule和CommonJS，也能扩展支持一些静态资源，也可以进行压缩等功能