怎样学习webpack - 走心分享

很多朋友可能都知道webpack，也见过webpack的代码，但是不明白里面一坨一坨的东西是什么意思，到底有什么用处！我们每个人学习一个新东西可能都会有这个过程，但是我个人觉得webpack可能是最混沌的一个东西，因为他得配置很多，功能很强大，让很多人望而却步。

下面就分享我之前学习的过程

一个新事物我们不能要求自己把他得全部东西都学会了，也不能直接去看文档直接去写demo，这样的意义并不大，你看文档如果仔细看肯定能看得懂，但是你看过之后能记忆多少，对你自己有多大帮助那就说不准了，首先要明确我为什么要学这个东西，他有什么特性，能解决实际开发中的什么问题，他得应用场景是什么，有人说了与时俱进，好多公司都在用，我也要用，的确是很多公司都在用，但是为什么都用呢？只是因为他是新东西吗？他肯定是有一些独特的特性，才会让大家趋之若鹜。想想周边的声音就可以听到webpack具体能做什么，我们顺着一些路子去摸索，去思考，把问题引出来，然后一个一个的击破，问题解决的我们自然也就学会了。

1.webpack主要是和react结合做单页开发，那好我们就去实现一个简单的配置，通过查找文档我们发现他得基本配置，入口，出口，css配置，babel配置 等 然后一个一个去看去查，也可以到github上面下载一些源码来看，这样的代码有很多

2.webpack本身多种模块化方式 如 es6 cmd amd，现在肯定是用es6的了，当然cmd本身就是node采用的方式，我们知道es6的代码是不能直接被浏览器支持的，那我们就会想到babel，再去查babel的配置，然后写demo去实现

3.公共代码提取， 我们为什么要公共代码提取呢？防止代码的重复下载 充分利用缓存机制，这个时候我们在去查怎样实现,查文档，找代码等

4.实现缓存机制 也就是js文件名后面带一串hash，hash是通过文件内容进行生成的，我们在去查，进行测试，最终达到我们想要的结果

5.自动刷新页面 代码热更新等   这些都是我们要用到的特性，都可以作为我们的问题去查找相关的解决方案，在通过测试进行修复

6.结合node web服务怎样配置 ，也就是node层做为web服务器，但同时webapck也需要做为监听js代码开启服务，怎样结合呢？

上面举例了几个实际的问题，其实学习一个新技术，我们要先做到对这个东西的大致了解然后去挖掘问题，带着问题去，解决问题过程就是学习的过程，其实就是一句话

通过思考发现问题，并解决问题就是学习的过程！ 这可能也适用于任何一门新技术。大家可以给我留言啊，一起交流，今天就到这里了，希望能对你有所帮助，下次见。