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 -- ...
随机推荐
- docker+zabbix,使用docker搭建zabbix服务
Zabbix 介绍 zabbix(音同 zæbix)是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵 ...
- Java 编码 UTF-8
近期在处理文件时发现了相同类型的文件使用的编码可能是不同的.所以想将文件的格式统一一下(由于UTF-8的通用性,决定往UTF-8统一),遇见的第一个问题是:怎样查看现有文件的编码方式. 文件编码问题集 ...
- c# Winform上传文件
http://blog.csdn.net/shihuan10430049/article/details/3734398这个代码有点问题 http://blogs.msdn.com/b/johan/a ...
- 怎么查询数据库中第30到40条记录呢? 通过ID,查询当前第30-40条记录 注意,ID不是顺序的
http://blog.csdn.net/lee576/article/details/5812347 http://bbs.csdn.net/topics/190070614 http://www. ...
- 【Poj 1330】Nearest Common Ancestors
http://poj.org/problem?id=1330 题目意思就是T组树求两点LCA. 这个可以离线DFS(Tarjan)-----具体参考 O(Tn) 0ms 还有其他在线O(Tnlogn) ...
- 训练深度学习网络时候,出现Nan是什么原因,怎么才能避免?——我自己是因为data有nan的坏数据,clear下解决
from:https://www.zhihu.com/question/49346370 Harick 梯度爆炸了吧. 我的解决办法一般以下几条:1.数据归一化(减均值,除方差,或者加入n ...
- CSYZDay1模拟题解
T1.game [问题描述] LZK发明一个矩阵游戏,大家一起来玩玩吧,有一个N行M列的矩阵.第一行的数字是1,2,…M,第二行的数字是M+1,M+2…2*M,以此类推,第N行的数字是(N-1)*M+ ...
- python 两个文件夹里的文件名对比
比如需要一个xml对应一个jpg时,有时候会不小心少了其中一个文件,这时可以用以下代码比较缺少的是哪个文件: # -*- coding: utf-8 -*- import os path1 = r'. ...
- Spark GraphX 聚合操作
package Spark_GraphX import org.apache.spark.{SparkConf, SparkContext} import org.apache.spark.graph ...
- 使用WinSXS进行系统盘瘦身Windows 7/2008/10/2012不断变大的C盘(Windows 更新清理)
这是一款非常给力的国产良心小工具,用阿里云ECS的时候,一个C盘没多久就被坑爹的微软更新沉余文件塞满.此工具简单好用一下搞定! 操作系统: 所有 NT 6.X 内核的操作系统.比如 Windows V ...