webpack打包(有面试题)

1.打包入口

entry:{
    “chunkKey”: “”  //使用key扩展性好,清楚的知道入口文件对应的key 
}

2.css文件处理

  • 引入css
clipboard.png
  • css-loader
clipboard.png

在较新的版本中使用mini-css-extract-plugin提取css文件

3.本地开发服务器:webpack-dev-server

  • 路径重定向,支持https,浏览器中可以显示编译错误,可以进行接口代理,模块热更新

4.Proxy

  • 代理远程接口请求
http-proxy-middleware参数:
option:
    target:指定代理的地址,
    changeOrigin:改变源到url,在虚拟主机上很有用
    headers:增加http请求头,
    logLevel:帮助调试
    pathRewrite:重定向
clipboard.png
  • 热更新优势:
保持应用的数据状态,节省调试时间,样式调试更快
deServer.hot
webpack.HotModuleReplacementPlugin:通过module.hot来操作,module.hot.accept当依赖更新后执行的回调
webpack.NameModulesplugin清晰相对路径输出
  • 代码调试:source Map 调试
设置DevTool的值:
clipboard.png
clipboard.png

5.优化打包速度

  • 分开vender和app--使用插件:DllPlugin和DllReferencePlugin
  • UglifyJsPlugin只要传入parallel(平行线程处理)和cache(缓存)参数
  • HappyPack,HappyPack.ThreadPool(线程池)
  • babel-loader:options.cacheDirectory,include,exclude加入参数提高速度
  • 减少resolve,DevTool:去除sourcemap,cache-loader
长缓存优化:从用户填写url访问网页开始,用户浏览器向服务器下载请求资源,服务器可通过控制http响应头,可以告知浏览器某些资源是强缓存,不用更新,这些资源不用更新时,浏览器会从本地加载资源。
解决方式:提取vender,hash->chunkhash,提取webpack runtime

Webpack面试

  • Webpack和grunt和gulp有啥不同:
Webpack是一个模块打包器,grunt和gulp是执行任务的,webpack可以递归的打包项目中的所有模块(递归:指定一个入口,分析模块的依赖,它会递归的查找所有相关的依赖),最终生成几个打包后的文件,他和其他的工具的最大的不同在于它支持code-splitting(代码分割),模块化(AMD,ESM,CommonJS)开发,全局的分析工具(分析整个项目引入的模块)
  • 什么是bundle,什么是chunk,什么是module:
bundle是由webpack打包出来的文件,chunk是指webpack在进行模块依赖分析的时候,代码分割出来的代码块,module是开发中的单个模块
  • 什么是loader,什么是plugin:
loader是用来告诉webpack如何转化处理某一类型的文件,并且引入到打包出的文件中
plugin是用来自定义webpack打包过程中的方式,一个插件是含有apply方法的一个对象,通过这个方法可以参与到整个webpack打包的各个流程(生命周期)
  • webpack-dev-server和http服务器如nginx有什么不同:
webpack-dev-server使用内存来存储webpack开发环境下的打包文件,并且可以使用模块热更新,他比传统的http服务器对开发更加简单高效
  • 什么是模块热更新:
模块热更新是webpack的一个功能,他可以使得代码修改过后不用刷新浏览器就可以更新,是高级版的自动刷新浏览器(将代码重新执行而不整体刷新浏览器)
  • 优化问题
clipboard.png

正在努力学习中,若对你的学习有帮助,留下你的印记呗(点个赞咯^_^)

不努力,就不知道前面有多精彩

5.1k 声望
286 粉丝
0 条评论
推荐阅读
小程序实现手写签名
在微信小程序上实现手写签名,获取canvascontext新版本和旧版本有点坑,新版本在获取canvas后如果页面有滑动,则签名坐标出现异常(在微信开发者工具上会出现2022-2-17),但是在真机上即使滑动也不会出现异常,为...

小小蚊子23阅读 3.9k

耗时一年半才出第一版,这个工具会一统前端么?
大家好,我卡颂。前端领域从不缺少热点,基本每过半年,就会出现新的工具。在这样快节奏的浪潮中,有个工具却显得格格不入,他就是Rome。从名字中我们就能窥探出一丝端倪,看看别的工具:vite(法语中快的的意思...

卡颂4阅读 1.2k评论 1

封面图
WebPack面试题汇总
现在的前端网页功能丰富,特别是SPA(single page web application 单页应用)技术流行后,JavaScript的复杂度增加和需要一大堆依赖包,还需要解决Scss、Less……新增样式的扩展写法的编译工作。Webpack 最核心的功...

xiangzhihong6阅读 261

想弄懂Babel?你必须得先弄清楚这几个包
相信很多人都知道Babel,知道它是用来编译ES6+的东西。但是再深入一点,大家都清楚我们平时项目中Babel用到的那些包作用是什么吗?为什么要用那几个包?

limingcan1阅读 585

封面图
前端微服务跨域配置解决办法,devServer为例
前言Nginx: 在上一篇我提到的跨域配置是正式上线的时候使用nginx做为配置的参考。Webpack: 而我们更多的时候是在开发阶段就需要通过跨域进行联合开发各个子应用部分功能DevServer配置解决跨域子应用静态资源跨域...

smallStone1阅读 1.1k评论 4

macOS上HBuildX 开发 uni-app项目,运行调试时编辑保存文件不会自动编译更新页面
点击运行到"Chrome",HBuildX能够正常编译并打开浏览器正常显示网页,这个时候如果去修改代码并保存,HBuildX底部控制台并不会出现重新编译的字样(正常是有的),浏览器也不会自动刷新,同时手动刷新变动的内容...

RobinTang阅读 852

alicdn边缘节点不稳定导致页面崩溃问题
某工作日,线上某用户向客服专员反馈没法正常访问“查看报价页面”,页面内容没有呈现。客服专员收到反馈后,将问题转交给SRE处理。很奇怪的是,SRE访问生产环境“查看报价页面”显示正常,为了进一步分析定位问题,S...

记得要微笑阅读 739

不努力,就不知道前面有多精彩

5.1k 声望
286 粉丝
宣传栏