资讯专栏INFORMATION COLUMN

带着问题学习webpack

guyan0319 / 2284人阅读

摘要:在学习过程中把自己看到的,学过的一些东西总结出来,供大家参考。在学习之前必须了解的几个概念。通过或是使再次打包文件名不变。在中是通过来来需要使用

这段时间一直在学习webpack,感觉webpack的功能太强大了。在学习过程中把自己看到的,学过的一些东西总结出来,供大家参考。在学习webpack之前必须了解的几个概念。

什么是webpack和grunt和gulp有什么不同

Webpack是一个模块打包器,他可以递归的打包项目中的所有模块,最终生成几个打包后的文件。他和其他的工具最大的不同在于他支持code-splitting,模块话(AMD,ESM,CommonJS),全局分析

什么是bundle,什么是chunk,什么是module?

Bundle是由webpack打包出来的文件,chunk是指webpack在进行模块的依赖分析的时候,代码分割出来的代码块。Module是开发中的单个模块

什么是loader?什么是plugin?

Loaders是用来告诉webpack如何转化处理某一类型的文件,并且引入到打包出的文件中
Plugin是用来自定义webpack打包过程的方式,一个插件是含有apply方法的一个对象,通过这个方法可以参与到整个webpack打包的各个流程(生命周期)

webpack-dev-server 和http服务器如nginax有什么区别?

Webpack-dev-server使用内存来存储webpack开发环境下的打包文件,并且可以使用模块热更新,他比传统的http服务对开发更简单高效

什么是模块热更新

模块热更新是webpack的一个功能,他可以使得代码修改过后不用刷新浏览器就可以更新,是高级版的自动刷新浏览器

什么是长缓存?在webpack中如何做到长缓存优化?

浏览器在用户访问页面的时候,为了加快加载速度,会对用户访问的静态资源进行存储,但是每一次代码升级或是更新,都需要浏览器去下载新的代码,最方便和简单的更新方式就是引入新的文件名称。在webpack中可以在output给输出的文件指定chunkhash,并且分离经常更新的代码和框架代码。通过NamedModulesPlugin或是HashedModuleIdsPlugin使再次打包文件名不变。

什么是Tree-shaking?css可以使用Tree-shaking吗?

Tree-shaking是指在打包中去除那些引入了,但是在代码中没有被用到的那些死代码。在webpack中Tree-shaking是通过uglifyJSPlugin来Tree-shaking来Tree-shaking JS.CSS 需要使用Purify-CSS

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/108213.html

相关文章

  • 26天学通前端开发(配资料)

    摘要:网上有很多前端的学习路径文章,大多是知识点罗列为主或是资料的汇总,数据量让新人望而却步。天了解一个前端框架。也可以关注微信公众号晓舟报告,发送获取资料,就能收到下载密码,网盘地址在最下方,获取教程和案例的资料。 前言 好的学习方法可以事半功倍,好的学习路径可以指明前进方向。这篇文章不仅要写学习路径,还要写学习方法,还要发资料,干货满满,准备接招。 网上有很多前端的学习路径文章,大多是知...

    blair 评论0 收藏0
  • 手把手教你用es6+vue2+webpack2+vue-router2搭建个人blog

    摘要:更新日志更新完成静态页面原型修复使用的正确姿势更新添加静态页面更新添加使用方法请戳我主要作用就是在你开发环节在后端同学还未开发完成的情况下,提供一个。 底下评论说是标题党,或者是光扔个github地址上来的同学我就不说什么了。你们有看看仓库的提交记录么?我还没有吃撑到开个仓库去骗star.我的出发点就是每天更新一部分代码,教大家用我所提到的技术栈搭建一个blog,我的出发点就是这么简单...

    weapon 评论0 收藏0
  • 前端团队 Gulp & Webpack 工作流 迁移记

    摘要:那时候所配置的任务监听匹配文件的变化自动刷新浏览器自动编译自动补全前缀多雪碧图合并拼图等等基于编译图片的任务,已经是完全满足我们的需求了。直至到后来在雪碧图的合并,多倍图的输出上,在上苦苦找寻不了比较完美的解决方案等等。 折腾 从 2015 到现在,短短的三年内,几乎每年折腾一下工作流的 更新换代 。从最早开始使用 Grunt 到 Gulp 再到 Webpack,再到 Rollup,...

    Baaaan 评论0 收藏0
  • webpack4 css打包压缩问题

    摘要:这两天一直在练习这个发现有好多问题和坑,做开发嘛,一定要有喜欢出问题并喜欢解决问题,坚决踩个坑填个坑的不怕死小强精神在配置上其实是可以是想和的,会根据进行对打包,压缩,下面自动压缩,亲测没有问题但是从里面分离出来的怎么打包呢我找了一天的相关 这两天一直在练习这个webpack4, 发现有好多问题和坑,做开发嘛,一定要有喜欢出问题并喜欢解决问题,坚决踩个坑填个坑的不怕死小强精神! web...

    Pines_Cheng 评论0 收藏0
  • php工程狮感知的前端工作流程

    摘要:在这种背景下,诞生了很多工具很多前端工作流程。目前我们很多时候常说的前端工程师,其实主要指的就是其工程师。所以就是来解决这些问题的最后至此前端的一个工作结构介绍至此结束。 这个时代不懂点前端知识,真的没有办法生存。就算不会写,也得了解它的原理吧! 最近做了一些总结,之前都是迷迷糊糊,搞不清楚前端之前的相关定位。好好梳理了一下。错误之处请各位指正。 本文主要说的是 JavaScript ...

    binaryTree 评论0 收藏0

发表评论

0条评论

guyan0319

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<