前言
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()
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 会导致对外部资源的请求(它们是外部资源)文章来源:https://www.toymoban.com/news/detail-427964.html
// 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模板网!