- 1、本文档共18页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
Webpack打包图片-JS-Vue
王红元coderwhy
目录
content
1Webpack打包图片
2Webpack打包JS代码
3Babel和babel-loader
4Webpack打包Vue
5resolve模块解析
coderwhy加载图片案例准备
◼为了演示我们项目中可以加载图片,我们需要在项目中使用图片,比较常见的使用图片的方式是两种:
img元素,设置src属性;
其他元素(比如div),设置background-image的css属性;
这个时候,打包会报错
coderwhy认识assetmoduletype
◼我们当前使用的webpack版本是webpack5:
在webpack5之前,加载这些资源我们需要使用一些loader,比如raw-loader、url-loader、file-loader;
在webpack5开始,我们可以直接使用资源模块类型(assetmoduletype),来替代上面的这些loader;
◼资源模块类型(assetmoduletype),通过添加4种新的模块类型,来替换所有这些loader:
asset/resource发送一个单独的文件并导出URL。
✓之前通过使用file-loader实现;
asset/inline导出一个资源的dataURI。
✓之前通过使用url-loader实现;
asset/source导出资源的源代码
✓之前通过使用raw-loader实现;
asset在导出一个dataURI和发送一个单独的文件之间自动选择。
✓之前通过使用url-loader,并且配置资源体积限制实现;
coderwhyassetmoduletype的使用
◼比如加载图片,我们可以使用下面的方式:
◼但是,如何可以自定义文件的输出路径和文件名呢?
方式一:修改output,添加assetModuleFilename属性;
方式二:在Rule中,添加一个generator属性,并且设置filename;
◼我们这里介绍几个最常用的placeholder:
[ext]:处理文件的扩展名;
[name]:处理文件的名称;
[hash]:文件的内容,使用MD4的散列函数处理,生成的一个128位的hash值(32个十六进制);
coderwhyurl-loader的limit效果
◼开发中我们往往是小的图片需要转换,但是大的图片直接使用图片即可
这是因为小的图片转换base64之后可以和页面一起被请求,减少不必要的请求过程;
而大的图片也进行转换,反而会影响页面的请求速度;
◼我们需要两个步骤来实现:
步骤一:将type修改为asset;
步骤二:添加一个parser属性,并且制定dataUrl的条件,添加maxSize属性;
coderwhy为什么需要babel?
◼事实上,在开发中我们很少直接去接触babel,但是babel对于前端开发来说,目前是不可缺少的一部分:
开发中,我们想要使用ES6+的语法,想要使用TypeScript,开发React项目,它们都是离不开Babel的;
所以,学习Babel对于我们理解代码从编写到线上的转变过程至关重要;
◼那么,Babel到底是什么呢?
Babel是一个工具链,主要用于旧浏览器或者环境中将ECMAScript2015+代码转换为向后兼容版本的JavaScript;
包括:语法转换、源代
您可能关注的文档
最近下载
- Hi5622V100 (海思AX3000低成本路由器wifi芯片)用户指南.pdf
- 2023年保安员笔试考前题库500题(含答案).pdf VIP
- 2024年联通智家工程师(初级)认证理论备考试题库(附答案).pdf VIP
- 2012款陆风X8_汽车使用手册用户操作图解驾驶指南车主车辆说明书电子版.doc
- 2024年中考数学压轴题型(安徽专用)专题08 解答题压轴题(几何综合(一)(学生版).docx
- 三农村劳动力转移就业职业技能培训方案.doc VIP
- 2016年大学日语专业四级考试真题.doc VIP
- 三农村劳动力转移培训指导书.doc VIP
- (完整版)军事地形学.pptx
- 联通智家工程师初级认证理论备考试题及答案.doc VIP
文档评论(0)