这是我参与8月更文挑战的第24天，活动详情查看：8月更文挑战；
写在前面
在现在的前端工程中，一定少不了webpack的身影，那么我们的项目中为什么需要用到webpack呢？下面我看来一起了解一下。
正文
先来看webpack官网的一个图，可以很清晰的看到，webpack主要用作打包构建，即将多个资源文件合并为一个资源文件。
webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具
那么我们为什么需要打包工具呢？看下面这个场景
// index.html
<!doctype html>
<html>
<body>
<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script>
const result = except(20, 5, 5); // 2
</script>
</body>
</html>
// a.js
function add(a, b) {
return a + b;
}
// b.js
function except(c, a, b) {
return c / add(a, b);
}
当然，这是一个未来说明问题而举的例子。这里HTML文件引入了两个js文件，这两个js中分别有一个add方法和一个except方法，b文件又依赖于a文件，我们运行except就能算出传入数值的结果。
这么写有什么问题么？当然有，首先我们引入了两个资源文件，会有性能的损耗；其次两个文件耦合性太大，如果我把a文件中的add名修改后，不修改b文件中的add名字，运行代码就会出错了；最后他们都挂载到了window上，这意味着文件中的变量和方法我可以随意重写；
说到底总结起来就是，耦合性太高，后期维护成本太大，修改一处代码要去多个引用了此代码的文件中去相应的修改。后期文件过多了http请求也会很多。
这就需要webpack这个工具了，webpack在打包过程中，会分析各个文件之间的依赖关系，然后生成一个js文件，之后浏览器运行请求这个js文件即可。
总结
使用webpack使我们能够专注开发，不用过多考虑依赖关系，同时打包为一个文件会减少http请求次数，也对性能提升有所帮助。
前端漫漫长途，我们都在路上，希望可以和小伙伴们一起交流，一起进步。持续更新ing.....
