webpack常见问题
概念问题一:什么是webpack和grunt和gulp有什么不同
答案:Webpack是一个模块打包器,他可以递归的打包项目中的所有模块,最终生成几个打包后的文件。他和其他的工具最大的不同在于他支持code-splitting、模块化(AMD,ESM,CommonJs)、全局分析。
概念问题二:什么是bundle,什么是chunk,什么是module?
答案:bundle是由webpack打包出来的文件,chunk是指webpack在进行模块的依赖分析的时候,代码分割出来的代码块。module是开发中的单个模块。
概念问题三:什么是Loader?什么是Plugin?
答案:
1)Loaders是用来告诉webpack如何转化处理某一类型的文件,并且引入到打包出的文件中
2)Plugin是用来自定义webpack打包过程的方式,一个插件是含有apply方法的一个对象,通过这个方法可以参与到整个webpack打包的各个流程(生命周期)。
配置问题:如何可以自动生成webpack配置?
答案: webpack-cli /vue-cli /etc ...脚手架工具
开发问题一:webpack-dev-server和http服务器如nginx有什么区别?
答案:webpack-dev-server使用内存来存储webpack开发环境下的打包文件,并且可以使用模块热更新,他比传统的http服务对开发更加简单高效。
开发问题二:什么 是模块热更新?
答案:模块热更新是webpack的一个功能,他可以使得代码修改过后不用刷新浏览器就可以更新,是高级版的自动刷新浏览器。
优化问题一:什么是长缓存?在webpack中如何做到长缓存优化?
答案:浏览器在用户访问页面的时候,为了加快加载速度,会对用户访问的静态资源进行存储,但是每一次代码升级或是更新,都需要浏览器去下载新的代码,最方便和简单的更新方式就是引入新的文件名称。在webpack中可以在output纵输出的文件指定chunkhash,并且分离经常更新的代码和框架代码。通过NameModulesPlugin或是HashedModuleIdsPlugin使再次打包文件名不变。
优化问题二:什么是Tree-shaking?CSS可以Tree-shaking吗
答案:Tree-shaking是指在打包中去除那些引入了,但是在代码中没有被用到的那些死代码。在webpack中Tree-shaking是通过uglifySPlugin来Tree-shaking
JS。Css需要使用Purify-CSS。
愿你成为终身学习者
webpack常见问题的更多相关文章
- webpack常见问题 收藏
一:webpack认识 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关 ...
- Vue+Webpack常见问题(持续更新)
常识 1.computed计算属性,使用的属性必需在data里面声明. computed: { canLogin: function(){ //注意这里的依赖的属性必需在data里面声明 return ...
- webpack学习笔记(二)-- 初学者常见问题及解决方法
这篇文章是webpack学习第二篇,主要罗列了本人在实际操作中遇到的一些问题及其解决方法,仅供参考,欢迎提出不同意见. 注:本文假设读者已有webpack方面相关知识,故文中涉及到的专有名词不做另外解 ...
- webpack vue-cli 常见问题总结
1. webpack打包压缩 ES6 js..vue报错: ERROR in js/test.js from UglifyJs Unexpected token punc ?(?, expected ...
- webpack安装,常见问题和基本插件使用
一:webpack认识 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关 ...
- webpack + react + es6, 并附上自己碰到的一些问题
最近一直在学react,react的基础部分已经学得差不多了,然而自己并没有做详细的记录,有兴趣的同志可以参考阮一峰老师的教程,个人觉得挺不错的,链接如下:https://github.com/rua ...
- webpack入门(一)——webpack 介绍
如今的网站正在演化为web应用程序: 1. 越来越多的使用JavaScript. 2. 现代浏览器提供更广泛的接口. 3. 整页刷新的情况越来越少,甚至更多代码在同一个页面.(SPA) 因此有很多代码 ...
- 在找一份相对完整的Webpack项目配置指南么?这里有
Webpack已经出来很久了,相关的文章也有很多,然而比较完整的例子却不是很多,让很多新手不知如何下脚,下脚了又遍地坑 说实话,官方文档是蛮乱的,而且有些还是错的错的..很多配置问题只有爬过坑才知道 ...
- vue项目中的常见问题
总结了几个vue项目开发过程中遇到的常见问题,希望大家注意. 注:文末有福利! 一.样式问题 1.vue中使用less 安装less依赖 npm install less less-loader -- ...
随机推荐
- android不是内部或外部命令,也不是可执行的程序或批处理文件
问题: 原因:没有配置好android sdk环境变量 解决方法: (1)切换到android sdk下的tools文件夹,再执行android命令就可以启动Android SDK管理器,我的andr ...
- PHP在浏览器上跟踪调试的方法以及使用ChromePhp、FirePHP的简介
之前用ThinkPHP时发现有个 trace 函数能够跟踪调试,感觉非常有意思.网上搜索了下类似的东西.发现了 ChromePhp ,曾经没想过这样来调试 PHP 程序.感觉非常方便,非常实用. Th ...
- CSS和JS结合控制样式
CSS控制样式,毋庸置疑.但有时,仅靠CSS却很难控制好,比如说,页面在多种条件下进行不同的呈现:或者运行过程中,会发生变化,比如说,左侧的菜单栏收缩了,那么右侧的宽度就变大了. 就拿这个元素的wid ...
- YTU 2626: B 统计程序设计基础课程学生的平均成绩
2626: B 统计程序设计基础课程学生的平均成绩 时间限制: 1 Sec 内存限制: 128 MB 提交: 427 解决: 143 题目描述 程序设计基础课程的学生成绩出来了,老师需要统计出学生 ...
- 利用JFreeChart生成多轴图表(7) (转自 JSP开发技术大全)
利用JFreeChart生成多轴图表(7) (转自 JSP开发技术大全) 14.7 利用JFreeChart生成多轴图表 通过JFreeChart插件还可以生成拥有多个坐标轴的图表,简称多轴图表.在生 ...
- hdoj--2187--悼念512汶川大地震遇难同胞——老人是真饿了(贪心)
悼念512汶川大地震遇难同胞--老人是真饿了 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Jav ...
- bzoj 1924 所驼门王的宝藏
题目大意: 有一个r*c的矩阵,上面有n个点有宝藏 每个有宝藏的点上都有传送门 传送门有三种:第一种可以传到该行任意一个有宝藏的点,第二种可以传到该列任意一个有宝藏的点,第三种可以传到周围的八连块上有 ...
- [Codeforces Education Round 6E] New Year Tree
[题目链接] https://codeforces.com/contest/620/problem/E [算法] 显然 , 一棵子树的DFS序必然为连续的一段 用线段树维护颜色数即可 [代码] #in ...
- 10. Extjs Button控件的handler配置项和click事件
转自:https://blog.csdn.net/lishk314/article/details/41541797 查看API: click( this, e, eOpts ) Fires when ...
- bzoj 2726: [SDOI2012]任务安排【cdq+斜率优化】
cdq复健.jpg 首先列个n方递推,设sf是f的前缀和,st是t的前缀和: \[ f[i]=min(f[j]+s*(sf[n]-sf[j])+st[i]*(sf[i]-sf[j])) \] 然后移项 ...