webpack5学习笔记

cache

持久化本地缓存，加快编译速度

cache: {
    type: 'filesystem',
    cacheDirectory: path.resolve(__dirname, '.cache'),
    name: 'ali' // 如果有多种编译模式，比如wx、支付宝，这里可以设置相应名称，然后各模式分别缓存
}

tree-shaking

webpack5实现了更强的tree-shaking，个人简单测试跟roll-up效果是一样的了

跟踪重复导出

// a.js
export const a = 1
export const b = 2

// b.js
import * as b from './a'
export default b

// c.js
import b from './b'
console.log(b.a)

比如上述情况，webpack4会把a.js中的a\b变量都打入最终包，webpack5只会保留变量a

innerGraph

webpack5会跟踪导出跟导入之间的关系

import { hh } from './hh'

export const test = () => {
    console.log(hh)
}

比如上述情况，如果test最终没有被引用，那么hh也不会被打入最终包

模块联邦

简单来说，可以让一个模块作为容器暴露内部应用，让其他模块运行时引入

微前端

我认为不能完全替代微前端框架，因为模块联邦并没有解决js/css隔离问题，没有解决技术栈/引用不一致的问题

另外我觉得本质上模块联邦能做的事，在模块联邦之前未必做不到，比如externals也可以把引用内容重定向到script引入的脚本中

版本控制

网上经常有人质疑这个问题：模块联邦模式无法解决版本问题，其实并不是，webpack官网已经提出了一种解决方案，就是通过在url中加版本号参数来控制加载的模块版本

使用场景

• 组件库作为模块打包，在各项目中通过这种方式运行时引入，而不用每次改包还要打包各应用
• 技术栈绝对统一的情况可以考虑作为微应用的一种实现方式，但要保证以后技术栈不会变

asset资源加载

之前加载字体、图片之类的资源要用file-loader/url-loader/raw-loader，现在可以直接设为asset类型，不用配置loader

 module: {
   rules: [
     {
       test: /.png/,
       type: 'asset'
     }
   ]
 }