前言

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 会导致对外部资源的请求（它们是外部资源)

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

webpack4和webpack5有什么区别