webpack官网:webpack.docschina.org/
vite官网:vitejs.dev/
vite中文官网:vitejs.cn/
§ 说一下webpack常见的Loader有哪些?
raw-loader:加载文件原始内容(UTF-8)
file-loader:把文件输出到一个文件夹中,在代码中通过相对URL去引用输出的文件(处理图片和文字)
source-map-loader:加载额外的Source Map文件,用来方便断点调试
svg-inline-loader:将压缩后的SVG内容注入到代码中
image-loader:加载并且压缩图片文件
json-loader:加载JSNON文件
babel-loader:将ES6转换为ES5
ts-loader:将TypeScript转换为JavaScript
awesome-typescript-loader:将TypeScript转换为JavaScript,性能高于ts-loader
sass-loader:将SCSS/SASS代码转换为CSS
css-loader:加载CSS,支持模块化,压缩,文件导入等特性
style-loader:把CSS代码注入到JavaScript中,通过DOM操作去加载CSS
postcss-loader:扩展CSS语法,使用下一代CSS,可以配合autoprefixer插件自动补齐CSS3的前缀
vue-loader:加载vue.js单文件组件
§ 说一下webpack常见的Plugin有哪些?
define-plugin:定义环境变量
ignore-plugin:忽略部分文件
html-webpack-plugin:简化HTML文件创建(依赖于html-loader)
web-webpack-plugin:可方便地为单页面引用输出HTML,比html-webpack-plugin好用
uglifyjs-webpack-plugin:在webpack4之前,不支持ES6压缩
terser-webpack-plugin:支持压缩ES6(webpack4)
webpack-parallel-uglify-plugin:多进程执行代码压缩,提升构建速度
mini-css-extract-plugin:分离样式文件,CSS 提取为独立文件,支持按需加载
serviceworker-webpack-plugin:为网页应用增加离线缓存功能
clean-webpack-plugin:目录清理,每次 npm run build 打包后自动删除上次打包后的dist文件夹
§ 说一下webpack中的Loader和Plugin的区别?
loader本质就是一个函数,在该函数中对接收到的内容进行转换,然后返回转换后的结果
因为webpack只认识JavaScript,所以loader的作用就是对其他类型的资源进行转译的预处理工作
plugin是插件,plugin基于事件流框架Tapable,插件可以扩展webpack的功能,在webpack运行的生命周期中会生成很多事件,plugin可以接收这些事件,在合适的时机,通过webpack提供的API改变输出结果
loader需要在module.rules中配置,由于作为模块的解析规则,所以类型是输入。输入的每一项都是一个Object。loader中内部包含了test类型文件,loader和options参数等属性
plugin 在 plugins 中单独配置,类型为数组,每一项是一个 Plugin 的实例,参数都通过构造函数传入
§ webpack的作用是什么?
目前前端页面功能丰富,特别是SPA单页面应用(single page web application)技术流行之后,JavaScript的复杂度增加和需要一大堆依赖包,还需要解决scss,less等,webpack的作用就是扩展写法和编译工作。目前前端主流框架都已经完全依赖于webpack的辅助了
§ webpack的工作原理?
webpack的主要作用是模块打包,webpack的工作原理是分析你的项目结构,找到JavaScript模块以及其他的一些浏览器不能直接运行的扩展语言,比如Scss,TypeScript等,然后将其转换或者打包成浏览器认识的语言
§ webpack的打包原理?
把一切都当作模块处理,不管是css还是js还是image还是html,都可以相互引用,通过定义entry.js,对所有依赖的文件进行跟踪,将各个模块通过loader和plugin处理,最后打包在一起。其次是按需加载,在打包过程中webpack通过code splitting功能将文件分为多个chunks,还可以将重读的部分单独提取出来作为commonChunk,从而实现按需加载,最后把所有依赖的文件打包成一个bundle.js,通过代码分割成单元片段并按需加载
§ webpack的核心里面?
Entry:入口,weback执行构建的第一步是从Entry开始,可以理解为输入,告诉webpack要使用哪个模块作为构建项目的起点,默认为根目录src下面的index.js
output:出口,告诉webpack在哪里输出它,打包好的代码以及如何明明,默认为dist文件夹
Module:模块,在webpack中一切都是模块,一个模块对应着一个文件,webpack会从配置的入口(Entry)开始递归查找出所有依赖的模块
Chunk:代码块,一个Chunk由多个模块组合而成,用于代码合并和分割
Loader:模块转换器,用于把模块原内容按照需求转换成新内容
Plugin:扩展插件,在webpack构建流程中的特定时机,会广播出对应的事件,插件可以监听这些事件的发生,在特定的时际做对应的事情
§ webpack的基本功能有哪些?
代码转换:TypeScript编译成JavaScript,SCSS编译成CSS等
文件优化:压缩JavaScript,CSS,HTML代码,压缩合成图片等
代码分割:提取多个页面的公共代码,提取首屏不需要执行部分的代码,让其异步加载
模块合并:在采用模块化的项目由很多模块和文件,需要构建功能把模块分类合并成一个文件
自动刷新:监听本地源代码的变化,自动构建,刷新浏览器
代码校验:在代码呗提交到仓库钱需要检测代码是否符合规范,以及单元测试是否通过
自动发布:更新完代码后,自动构建出线上发布代码并传输给发布系统
§ 什么是bundle,什么是chunk,什么是module
bundle:是由webpack打包出来的文件
chunk:是指webpack在进行模块依赖分析的时候,代码分割出来的代码块
module:是开发中的单个模块
§ ExtractTextPlugin插件的作用是什么?
ExtractTextPlugin插件的作用是提取出 JavaScript 代码里的 CSS 到一个单独的文件
§ sourceMap的作用是什么?
sourceMap是一个映射关系,将打包后的文件映射到源代码中,作用是用于定位报错位置
配置方法:
devtool:'source-map'
加不同前缀的含义:
inline:不胜澈给映射关系文件,打包进main.js
cleap:1.只精确到位,不精确到列,打包速度快,2.只管业务代码,不管第三方模块
module:不仅管业务代码,而且还管第三方代码
eval:执行效率最快,性能最好
§ 讲一下HMR模块热更新
HMR借助webpack.HotModuleReplacementPlugin(),devServer开启hot,我们可以实现之刷新css,不影响js,或者js中实现热更新,只更新指定的js模块
if (module.hot) {
module.hot.accept(’./library.js’, function() {
// Do something with the updated library module…
});
}
§ webpack如何配置多个入口文件?
entry: {
home: resolve(__dirname, "src/home/index.js"),
about: resolve(__dirname, "src/about/index.js")
}
用于描述入口的对象。你可以使用如下属性:
dependOn: 当前入口所依赖的入口。它们必须在该入口被加载前被加载。
filename: 指定要输出的文件名称。
import: 启动时需加载的模块。
library: 指定 library 选项,为当前 entry 构建一个 library。
runtime: 运行时 chunk 的名字。如果设置了,就会创建一个新的运行时 chunk。在 webpack 5.43.0 之后可将其设为 false 以避免一个新的运行时 chunk。
publicPath: 当该入口的输出文件在浏览器中被引用时,为它们指定一个公共 URL 地址
§ 什么是长缓存?在webpack中如何做到长缓存优化?
浏览器在用户访问页面的时候,为了加快加载速度,会对用户访问的静态资源进行存储,但是每一次代码升级或者更新,都需要浏览器去下载新的代码,最方便和最简单的更新方式就是引入新的文件名称
在webpack中,可以在output给出输出的文件制定chunkhash,并且分离经常更新的代码和框架代码,通过NameModulesPlugin或者HashedModulesPlugin使再次打包文件名不变
§ 什么是Tree-sharking?
Tree-sharking指打包中去除那些引入了但在代码中没用到的死代码。在wepack中js treeshaking通过UglifyJsPlugin来进行,css中通过purify-CSS来进行
§ webpack-dev-server 和 http服务器的区别?
webpack-dev-server使用内存来存储webpack开发环境下的打包文件,并且可以使用模块热更新,比传统的http服务对开发更加有效
§ 介绍一下webpack和vite的区别:
底层:
webpack是基于nodejs构建,js是以毫秒计数,
vite是基于esbulid预构建依赖,esbulid是采用go语言编写的,go语言是纳秒级别的
因为js是毫秒级别,go语言是纳秒级别的,所以从本质上讲,vite比webpack打包要快很多
1.webpack是先打包再启动开发服务器
webpack是先打包,再启动开发服务器,请求服务器时,直接给予打包后的结果
2.vite是直接启动开发服务器,然后按需编译依赖文件
vite时直接启动开发服务器,请求哪个模块再对哪个模块进行实时编译
原理:
vite是将开发环境下的模块文件作为浏览器要执行文件,vite启动的时候不需要打包,也不需要分析模块依赖,编译,所以启动速度非常快,当浏览器请求需要的模块时,再对指定的模块进行编译,这种按需编译的模块,所以极大的缩短了时间
HMR热更新原理:
webpack:重新将该模块的所有依赖重新编译
vite:当某个模块内容改变时,让浏览器重新请求该模块