webpack5新特性

1 持久化缓存

缓存在webpack5中默认开启，缓存默认是在内存里,但可以对cache进行设置
cache: {

type: 'filesystem', //'memory' | 'filesystem' cacheDirectory: path.resolve(__dirname, 'node_modules/.cache/webpack'),

},

2 资源模块

资源模块是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader

• raw-loader => asset/source 导出资源的源代码
• file-loader => asset/resource 发送一个单独的文件并导出 URL
• url-loader => asset/inline 导出一个资源的 data URI
• asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现

3 URIs （会用的比较少）

Webpack 5 支持在请求中处理协议
支持data 支持 Base64 或原始编码,MimeType可以在module.rule中被映射到加载器和模块类型

4 moduleIds & chunkIds的优化

• 在webpack5之前，没有从entry打包的chunk文件，都会以1、2、3...的文件命名方式输出,删除某些些文件可能会导致缓存失效
• 在生产模式下，默认启用这些功能chunkIds: "deterministic", moduleIds: "deterministic"，此算法采用确定性的方式将短数字 ID(3 或 4 个字符)短hash值分配给 modules 和 chunks
  chunkId设置为deterministic，则output中chunkFilename里的[name]会被替换成确定性短数字ID
  虽然chunkId不变(不管值是deterministic | natural | named)，但更改chunk内容，chunkhash还是会改变的

可选值 含义 示例
natural: 按使用顺序的数字ID 1
named: 方便调试的高可读性id src_two_js.js
deterministic: 根据模块名称生成简短的hash值 915
size: 根据模块大小生成的数字id 0

5 移除Node.js的polyfill

webpack4带了许多Node.js核心模块的polyfill,一旦模块中使用了任何核心模块(如crypto)，这些模块就会被自动启用
webpack5不再自动引入这些polyfill
如果要引入加上

reslove:{

fallback:{

"crypto":require.resolve("crypto-browerify")

//...包括stream buffer

}

}

6 更强大的tree-shaking

tree-shaking就在打包的时候剔除没有用到的代码

• webpack4 本身的 tree shaking 比较简单（直接import整个文件或者对象内部未使用的不能被剔除；commonJs模式不支持）,主要是找一个 import 进来的变量是否在这个模块内出现过
• webpack5可以进行根据作用域之间的关系来进行优化,开始支持
  会分析模块的引用关系

webpack.config.js:配置：optimization:true 会给没使用的文件进行标记:
unused harmony export nums ,在prodction模式中会被删除

---

webpack4:在编写支持 tree-shaking 的代码时，导入方式非常重要。你应该避免将整个库导入到单个 JavaScript 对象中。当你这样做时，你是在告诉 Webpack 你需要整个库， Webpack 就不会摇它。

// 全部导入 (不支持 tree-shaking)
import _ from 'lodash';
// 具名导入(支持 tree-shaking)
import { debounce } from 'lodash';

modudleId

• 开发环境下 模块ID是相对于根目录的相对路径，上线不行

---

sideEffects:false

函数副作用指当调用函数时，除了返回函数值之外，还产生了附加的影响,例如修改全局变量
严格的函数式语言要求函数必须无副作用

sideEffects:false值，就认为所有的js文件都没有副作用,就可以在内部css的loader中设置sideEffects:true(表示有副作用)

image.png

//package.json: css有副作用不删除
 "sideEffects": ["*.css"],

---