全国热线

400-080-3312

全国监督投诉热线:9:00-23:00

前端新手教程:webpack打包,你只需要知道这些

前端技术运用的非常广泛,若是想从事前端开发的新手也要掌握多个技术,为此对于新手来说,感觉弄起来会比较困难,但南京学码思web培训机构小编想说,其实作为一个新手,刚接触到前端的时候,还是从一些简单的入手比较好,现在

  前端技术运用的非常广泛,若是想从事前端开发的新手也要掌握多个技术,为此对于新手来说,感觉弄起来会比较困难,但南京学码思web培训机构小编想说,其实作为一个新手,刚接触到前端的时候,还是从一些简单的入手比较好,现在我们就一起来看下吧!


  WebPack简单来说是模块打包插件:分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。

qd.png

  为什么要进行打包?


  不得不提到npm,npm可以说是最大的代码库注册中心,前端开发者都十分依赖它。唯一的问题是,如果不进行打包,Node的模块系统就无法运行在Web上。于是,Browserify、Webpack之类的现代Web打包器出现了。

qd1.jpeg

  作为新手,只要懂得四个核心概念即可:


  入口


  出口


  加载器


  插件


  入口


  入口的四种写法:

1.jpeg

  出口


  项目主代码被webpack打包完,要在哪里导出呢?比如vue,那就是dist,output参数里文件名和路径。

2.jpeg

  加载器


  loader就是加载器,主要用于对模块的源代码进行转换。

3.jpeg

  插件

4.jpeg

  插件很好理解,常用的就是js压缩插件,css压缩打包插件,图片压缩插件…


  最后


  webpack是现在前端必须得会的工具之一,新手们不必一开始就从复杂的配置学起,简单入门,才能提高学习效率。分享做Web前端开发需要了解的几个知识点


  通过以上的介绍,不知大家对前端可有了新的看法,可会弄了呢?当然如果您还想对前端有更多的了解,欢迎和南京学码思web培训机构老师一起沟通交流下哈!


上一篇:熟悉HTML和CSS,未来要如何发展
下一篇:web前端的薪资真的高吗?浅谈web前端未来发展

相关推荐

免费试听 | 学费咨询 | 在线报名 | 申请补贴 | 软件培训 | 网站地图

2016-2020 南京学码思教育科技有限公司 .All Rights Reserved

苏ICP备16033487号 www.njxms.com.cn

全国热线

400-080-3312

全国监督服务热线:9:00-23:00