0


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 -Dconst HardSourceWebpackPlugin =require('hard-source-webpack-plugin');newHardSourceWebpackPlugin()

在这里插入图片描述

5:

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

在这里插入图片描述

2.资源模块处理

4:中处理字体图标等文件需要单独引入loader进行处理
imit: 当文件大于10000 时单独打包
在这里插入图片描述
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 会导致对外部资源的请求(它们是外部资源)

// dataimport data from"data:text/javascript,export default 'hello webpack4'"
console.log(data)// fileimport 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.jsexperiments:{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.jsimport 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://blog.csdn.net/u013194063/article/details/130418755
版权归原作者 亨呢还要悟再谦虚点 所有, 如有侵权,请联系我们删除。

“webpack4和webpack5有什么区别”的评论:

还没有评论