webpack4和webpack5有什么区别

这篇具有很好参考价值的文章主要介绍了webpack4和webpack5有什么区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

Webpack4和Webpack5是两个版本的Webpack,其中Webpack5是Webpack的最新版本。


一、比较

性能:Webpack5相对于Webpack4有更好的性能表现,尤其是在构建速度和Tree Shaking方面。

模块联邦:Webpack5引入了模块联邦的概念,可以让多个Webpack构建的应用程序共享模块,从而减少了代码冗余。

持久性缓存:Webpack5引入了持久性缓存,通过使用持久性哈希来生成文件名,可以更好地利用浏览器缓存,从而提高应用程序的加载速度。

解析器:Webpack5支持WebAssembly模块、JSON模块和TypeScript模块的解析。

构建输出:Webpack5支持输出多个bundle,通过设置output.chunkFilename参数来实现。

移除插件:Webpack5移除了一些不常用的插件,例如UglifyJsWebpackPlugin和CommonsChunkPlugin。

二、使用步骤

1.5缓存使用方法和构建速度对比

构建速度上 5 比 4 速度更快,
都有 cache 属性
webpack5比webpack4的文件压缩策略更优,分割文件后的vendor体积缩小
webpack5 缓存构建性能优于webpack4
webpack5 缓存的功能显著优于webpack4

4:的缓存文件只有 true false,不能从新命名之类的 所以引入插件

npm install hard-source-webpack-plugin -D
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
new HardSourceWebpackPlugin()

webpack4和webpack5有什么区别

5:

cache: {
    type: 'filesystem',
    cacheDirectory: path.join(__dirname, 'node_modules/.cac/webpack')
  },

webpack4和webpack5有什么区别

2.资源模块处理

4:中处理字体图标等文件需要单独引入loader进行处理
imit: 当文件大于10000 时单独打包
webpack4和webpack5有什么区别
5:maxSize: 8 * 1024

module: {
    rules: [
		{
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024,
          },
        },
        generator: {
          filename: 'images/[name].[hash:6][ext]',
        },
      },

3.Webpack 5 支持在请求中处理协议。

支持data:支持 Base64 或原始编码。Mimetype 可以在module.rule中被映射到加载器和模块类型。例如:import x from “data:text/javascript,export default 42”。
支持file:支持引入本地资源文件(非项目中资源)
支持http(s):需要通过new webpack.experiments.schemesHttp(s)UriPlugin()选择加入。
默认情况下,当目标为 "web "时,这些 URI 会导致对外部资源的请求(它们是外部资源)

// data
import data from "data:text/javascript,export default 'hello webpack4'"
console.log(data)

// file
import data from "file:///Users/liumeng/Desktop/tx-classroom-resource/%E8%AF%BE%E7%A8%8B%E9%A1%B9%E7%9B%AE/webpack/webpack4/template/eslintinit.1a7d4ecc.jpg"
const addImg = document.querySelector('.addImg')
addImg.setAttribute('src',data)

// https
// webpack.config.js
experiments: {
  buildHttp: {
    allowedUris: [
      "https://fast-learn-oss.youbaobao.xyz/",
      "http://hp.hpbb.me//upload/20171108173745476048.jpeg?x-oss-process=style/thumb"
    ],
    frozen: false,
    cacheLocation: false,
    upgrade: true
  }
},
// index.html
<img  class="addImg" alt="">
<img  class="addImg2" alt="">
  
// index.js
import data from 'https://fast-learn-oss.youbaobao.xyz/tb/category6.png';
const addImg = document.querySelector('.addImg')
addImg.setAttribute('src',data)
import data2 from 'http://hp.hpbb.me//upload/20171108173745476048.jpeg?x-oss-process=style/thumb';
const addImg2 = document.querySelector('.addImg2')
addImg2.setAttribute('src',data2)

4.tree-shaking。

4:全打包
5:认为你没有使用到的引用 会不打包文章来源地址https://www.toymoban.com/news/detail-427964.html

到了这里,关于webpack4和webpack5有什么区别的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Webpack5 core-js和babel-loader区别和用法

    core-js是一个流行的JavaScript库,它提供了对新的JavaScript特性、API和方法的兼容性支持。它通过模拟缺失的功能,并提供 polyfill 来使这些功能可以在旧版浏览器中正常运行 polyfill 翻译过来叫做垫片/补丁。就是用社区上提供的一段代码,让我们在不兼容某些新特性的浏览器上,

    2024年02月13日
    浏览(39)
  • webpack5高级配置

    注意:webpack5基本配置只是打包产出一个html文件 ,想要产出多个html就需要进行过入口的配置 webpack.common.js 注意:公共文件中的入口需要引入两个js文件  webpack.prod.js 注意:输出的时候利用[name]根据输入的文件名来确定导出的文件名称! webpack.common.js 注意:针对多个html文件

    2024年02月15日
    浏览(54)
  • 【webpack5】高级优化

    本章节主要介绍 Webpack 高级配置。 所谓高级配置其实就是进行 Webpack 优化,让我们代码在编译/运行时性能更好~ 我们会从以下角度来进行优化: 提升开发体验 提升打包构建速度 减少代码体积 优化代码运行性能 为什么 开发时我们运行的代码是经过 webpack 编译后的,例如下面

    2024年01月18日
    浏览(45)
  • webpack5性能优化

     注意:开启缓存,配置后打包是就能缓存babel webpack.common.js文件命中缓存cacheDirectory         Directory/dəˈrektəri/目录;   测试:  打包后的结果:  注意:打包后promise的打包文件会变化文件名    注意:引入第三方模块,模块可能有许多东西是我们不需要的,而引入时会默认

    2024年02月16日
    浏览(42)
  • webpack5 (二)

    是 js 编译器,主要的作用是将 ES6 语法编写的代码转换为向后兼容的 js 语法,以便可以运行在当前版本和旧版本的浏览器或其他环境中。 它的配置文件有多种写法: babel.config.*(js/json) babelrc.*(js/json) package.json 中的 babel:不需要创建文件,在原有的文件基础上写。 babel 会查找

    2024年02月10日
    浏览(43)
  • webpack5(一)

    webpack是一个静态资源打包工具,它会以一个或者多个文件作为打包的入口,将整个项目的所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件,可以在浏览器端运行。一般将 webpack 输出的文件称为 bandle 。 webpack 本身的功能也是有限的,一共有两种模

    2024年02月11日
    浏览(37)
  • webpack5 学习之路

    1.视频 01-课程介绍_哔哩哔哩_bilibili 2.配套资料 依赖环境 | 尚硅谷 Web 前端之 Webpack5 教程 3.webpack 官方文档 入口起点(entry points) | webpack 中文文档 4.vue cli 官方文档 介绍 | Vue CLI 挖矿:Coding Tree

    2024年02月15日
    浏览(34)
  • Webpack5 SourceMap

    提示:以下是本篇文章正文内容,下面案例可供参考 为什么需要SourceMap 开发时我们运行的代码是经过 Webpack 编译压缩合并之后的,这样的目的是以提高应用程序的性能,但是这种优化也给调试问题带来了困难,因为压缩后的代码难以追踪和调试。这时候,SourceMap技术就能派

    2024年02月13日
    浏览(37)
  • Vite和Webpack的区别是什么

    一.区别 构建速度: Vite 使用原生 ES 模块进行开发,不需要像 Webpack 那样在编译时将所有代码转换为 JS 进行打包,因此它的构建速度通常比 Webpack 快。1. Webpack 需要打包所有的模块到一个或多个文件中,这个过程会更慢 开发体验: Vite 提供了一个快速的开发体验,支持热更新

    2024年01月25日
    浏览(37)
  • webpack5之模块联邦

    本文将介绍“模块联邦”相关的内容。 联邦模块是 webpack5 提供的一个新特性,它是通过 webpack 原生提供的 ModuleFederationPlugin 插件来实现的。 联邦模块主要是用来解决多个应用之间代码共享的问题,可以让我们的更加方便的实现跨应用的代码共享。 组件复用 复制/粘贴 发布独

    2024年02月15日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包