怎样学习webpack - 走心分享

时间:2021-03-26 08:32:09

很多朋友可能都知道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代码开启服务,怎样结合呢?

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

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