为什么前端不得不学webpack，来自前端小白的解释

说明

这篇不是专业解释，只是从一个角度说明为什么现在前端webpack是必须的，而且是前端从业者无法逃避的技术。

基本常识

浏览器只能处理HTML/CSS,对于JS脚本,会调用JS脚本引擎来处理,浏览器本身不处理程序代码。浏览器可以解析的代码一定符合w3c等web标准，同时有些标准虽然已经制定但是还没有被浏览器厂商开发，这些也不能被浏览器解析。比如你不能用.word的文件，也不能使用es6等超前的javascript语法。

从vue的单文件规范说起

请参考下面vue对单文件的说明，理解不困难，就是一个文件包含了js，html,css，但后缀名是.vue，根据上面基本常识浏览器根本解析不了.vue的文件。
https://vue-loader.vuejs.org/zh/spec.html

现在前端框架vue，react使用了很多浏览器不能解析的技术，比如less,es6,因为这些新技术可以大大提高效率。同时导致了新技术的语法不能被浏览器解析的问题。

如何解决？

这时webpack才登场，webpack里面有个loader，名字无所谓，关键看他做什么。不同的loader分别负责把不同的技术语言翻译成浏览器可以解析的代码。比如babel 可以把es6转换成低版本的js，css-loader可以把less等转传承普通的css。这样浏览器就可以渲染解析后的代码

总结

现在前端离不开vue,react等框架，前端框架离不开es6等技术，利用这些技术就需要webpack这样工作做转化。随意对于前端来讲webpack是必须的。这是必须学习webpack的根本理由，因为无法逃避。

webpack未来在哪里？

我还没有熟练掌握webpack，但我认为10年内webpack一定会消失。webpack还有很多其他功能，但作为一个打包工具有点鸡肋。更多的可能成为一个边缘化的工具，不需要从业者话费太多时间去学习。