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:认为你没有使用到的引用 会不打包