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 布局自适应屏幕
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvenFzNjI3NjExMzA=/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...
- 数组/矩阵转换成Image类
Python下将数组/矩阵转换成Image类 原创 2017年04月21日 19:21:27 标签: python / 图像处理 3596 先说明一下为什么要将数组转换成Image类.我处理的图像是F ...
- Cocos2d-x学习笔记(12)(CCControlSwitch开关、CCControlSlider滑动条、CCControlButtonbutton)
CCEditBox.CCControlSwitch.CCControlSlider.CCControlColourPicker.CCControlButton等都是Cocos2d-x 2.x的最新UI ...
- 三分钟迁移Spring boot工程到Serverless
前言 Spring Boot已成为当今最流行的Java后端开发框架,典型的应用方式是在云上购买一台虚拟机,每天24小时在上面运行Java程序,在这种情况下,用户必须维护自己的虚拟机环境,而且按照包月包 ...
- iOS开发——高级篇——iOS 强制退出程序APP代码
1.先po代码 UIAlertView* alert = [[UIAlertView alloc] initWithTitle:self.exitapplication message:@" ...
- Codeforces Round #214 (Div. 2) C. Dima and Salad 背包
C. Dima and Salad Dima, Inna and Seryozha have gathered in a room. That's right, someone's got to ...
- document.getElementsByClassName("head")[0].parentElement
document.getElementsByClassName("head")[0].parentElement
- 【POI2004】【Bzoj2069】T2 洞穴 zaw
T2 洞穴zaw [问题描述] 在 Byte 山的山脚下有一个洞穴入口. 这个洞穴由复杂的洞室经过隧道连接构成. 洞穴的入口是 1 号点.两个洞室要么就通过隧道连接起来,要么就经过若干隧道间接的相连. ...
- 30. extjs getEl方法 怎么用
转自:https://blog.csdn.net/evilcry2012/article/details/50586861 2014-10-27 11:57 提问者采纳 getEl = compo ...
- 源码阅读之ArrayList(JDK8)
ArrayList概述 ArrayList是一个的可变数组的实现,实现了所有可选列表操作,并允许包括 null 在内的所有元素.每个ArrayList实例都有一个容量,该容量是指用来存储列表元素的数组 ...