webpack5和webpack4的一些区别

自动清除打包目录

  • webpack4
// bash
npm i clean-webpack-plugin -D
//webpack.config.js
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {plugins: [new CleanWebpackPlugin()}
}
  • webpack5
module.exports = {output: {clean: true}
}

topLevelAwait

webpack5允许在模块的顶级代码中直接使用await,比如:

function delay(time) {return new Promise((resolve, reject) => {setTimeout(() => {resolve("resolve")}, time)})
}
var res = await delay(1000)
console.log('res: ', res);
export default res;

由于topLevelAwait还未成为正式标准(官方文档),所以需要在webpack.config.js配置一下:

module.exports = {experiments: {topLevelAwait: true}
}

打包体积优化

webpack5对模块的合并、作用域提升、tree shaking 等处理更加智能和简洁

打包缓存优化

webpack4需要使用cache-loader打包结果来优化之后的打包性能webpack5默认就开启了打包缓存(官方文档),无需再安装cache-loader

资源模块loader

webpack5不需要再安装 file-loader、url-loader、raw-loader 处理静态资源文件了(官方文档)

  • webpack4
npm i file-loader url-loader -D   // 将小文件转为base64的时候需要用到file-loader
module.exports = {module: {rules: [{test: /\.(png|jpe?g|gif)$/i,use: [{loader: 'url-loader',options: {limit: 10240, // 低于10k的图片直接转为base64esModule: false,outputPath: 'images',name: '[name][contenthash:4].[ext]',}},]}]}
}
  • webpack5
module.exports = {module: {rules: [{test: /\.(png|jpe?g|gif)$/i,type: 'asset',parser: {dataUrlCondition: {maxSize: 10 * 1024 // // 低于10k的图片直接转为base64}},generator: {filename: 'assets/img/[hash:4][ext]', 这个配置的优先级高于output的assetModuleFilename}}]}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/43335.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用PostgreSQL构建强大的Web应用程序:最佳实践和建议

PostgreSQL是一个功能强大的开源关系型数据库,它拥有广泛的用户群和活跃的开发社区。越来越多的Web应用选择PostgreSQL作为数据库 backend。如何充分利用PostgreSQL的特性来构建健壮、高性能的Web应用?本文将给出一些最佳实践和建议。 一、选择合适的PostgreSQL数据类型 Pos…

【Vue】Mixin 混入

Vue Mixin 混入 1.简介 混入(mixin)提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项(如data、methods、mounted等等)。当组件使用混入对象时,所有混入对象的…

Java将时间戳转化为特定时区的日期字符串

先上代码: ZonedDateTime dateTime ZonedDateTime.ofInstant(Instant.ofEpochMilli(System.currentTimeMillis()),zone ); //2019-12-01T19:01:4608:00String formattedDate dateTime.format(DateTimeFormatter.ofPattern("yyyy-MM-dd") ); //2019-12-…

.git内存清理方式

查看前15个大文件 git rev-list --objects --all | grep "$(git verify-pack -v .git/objects/pack/*.idx | sort -k 3 -n | tail -15 | awk {print$1})"删除文件夹(public/housimg文件夹目录) git filter-branch --tree-filter rm -rf publ…

解决使用element ui时el-input的属性type=number,仍然可以输入e的问题。

使用element ui时el-input的属性typenumber,仍然可以输入e, 其他的中文特殊字符都不可以输入,但是只有e是可以输入的,原因是e也输入作为科学计数法的时候,e是可以被判定为数字的, 但是有些场景是需要把e这种…

DICOM图像的常用一些参数解析

医学图像DICOM医学影像文件格式详解 Dicom文件基本操作 DICOM图像参数? 像素:构成图片的小色点。图像每个维度的像素个数——该维度一共有多少个均匀分布的像素点。 分辨率(单位DPI):每英寸(Inch&#xf…

鸿蒙剥离 AOSP 不兼容 Android 热门问题汇总,不吹不黑不吵

上周发了一篇 《鸿蒙终于不套壳了?纯血 HarmonyOS NEXT 即将到来》的相关资讯,没想到大家「讨(fa)论(xie)」的热情很高,莫名蹭了一波流量,虽然流量对我来说也没什么用,但…

私密数据采集:隧道爬虫IP技术的保密性能力探究

作为一名专业的爬虫程序员,今天要和大家分享一个关键的技术,它能够为私密数据采集提供保密性能力——隧道爬虫IP技术。如果你在进行敏感数据采集任务时需要保护数据的私密性,那么这项技术将是你的守护神。 在进行私密数据采集任务时&#xff…

不了解UI设计需要掌握的技能? 优漫动游

很多人听说过UI设计行业,知道它是用来制作界面的高薪技术,但对于做UI设计需要什么技能却不是很清楚。且看本文的分析。​ 不了解UI设计需要掌握的技能?   UI设计是英文User和interface的缩写,是指对软件的人机交互、操作逻辑、界…

Java基础知识题(二)

系列文章目录 Java基础知识题(一) 文章目录 系列文章目录 前言 1. Java中的 组合、聚合和关联有什么区别? 2. 解释为什么Java被称作是“平台无关的编程语言”? 3. 简述什么是值传递和引用传递?重点 4. 详细阐述Java进程和线程的区别 …

Java # JVM

一、1.8之前 运行时数据区(进程共享) 运行时常量池为什么要有方法区: jvm完成类装载后,需要将class文件中的常量池转入内存,保存在方法区中为什么是常量: 常量对象操作较多,为了避免频繁创建和…

图像去雨-雨线清除-图像处理-(计算机作业附代码)

背景 多年来,图像去雨已经被广泛研究,使用传统方法和基于学习的方法。然而,传统方法如高斯混合模型和字典学习方法耗时,并且无法很好地处理受到严重雨滴影响的图像块。 算法 通过考虑雨滴条状特性和角度分布,这个问…

【Leetcode】98. 验证二叉搜索树

一、题目 1、题目描述 给你一个二叉树的根节点 root ,判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下: 节点的左子树只包含 小于 当前节点的数。节点的右子树只包含 大于 当前节点的数。所有左子树和右子树自身必须也是二叉搜索树。示例1: 输入:root = …

马上七夕到了,用各种编程语言实现10种浪漫表白方式

目录 1. 直接表白:2. 七夕节表白:3. 猜心游戏:4. 浪漫诗句:5. 爱的方程式:6. 爱心Python:7. 心形图案JavaScript 代码:8. 心形并显示表白信息HTML 页面:9. Java七夕快乐:…

QT的布局与间隔器介绍

布局与间隔器 1、概述 QT中使用绝对定位的布局方式,无法适用窗口的变化,但是,也可以通过尺寸策略来进行 调整,使得 可以适用窗口变化。 布局管理器作用最主要用来在qt设计师中进行控件的排列,另外,布局管理…

Android 远程真机调研

背景 现有的安卓测试机器较少,很难满足 SDK 的兼容性测试及线上问题(特殊机型)验证,基于真机成本较高且数量较多的前提下,可以考虑使用云测平台上的机器进行验证,因此需要针对各云测平台进行调研、比较。 …

服装定制小程序

如今,人们对时尚的追求已不仅仅停留在传统的购买与穿搭上,而是更加注重个性化和定制化的需求。为满足这一需求,乔拓云网推出了一款创新的服装定制小程序,为用户提供定制专属时尚的全新旅途。 通过进入【乔拓云】后台,用…

Ordinals 之后,以太坊铭文协议 Ethscriptions 如何再塑 NFT 资产形态

随着加密市场的发展,NFT 赛道逐渐形成了其独有的市场。但在加密熊市的持续影响下,今年 NFT 赛道的发展充满坎坷与挑战。据 NFTGO 数据显示,截至 8 月 7 日,与去年相比,NFT 市值总计约 56.4 亿美元,过去 1 年…

搜狗拼音暂用了VSCode及微信小程序开发者工具快捷键Ctrl + Shit + K 搜狗拼音截图快捷键

修改搜狗拼音的快捷键 右键--更多设置--属性设置--按键--系统功能快捷键--系统功能快捷键设置--取消Ctrl Shit K的勾选--勾选截屏并设置为Ctrl Shit A 微信开发者工具设置快捷键 右键--Command Palette--删除行 微信开发者工具快捷键 删除行:Ctrl Shit K 或…