Webpack 5 发布，Chrome 86 支持本地文件系统

Webpack5 发布

webpack 目前作为使用最广泛的前端模块化工具，早已成为前端工程化基础设施的一部分

而距 webpack 上一个大版本更新已经时隔两年有余

这次（北京时间10月11日） webpack5 正式发布

随着5.0 这个大版本发布，底层架构的调整也带来了许多破坏性更新

概览

这次更新主要有以下几点变化:

• 使用持久缓存提高构建性能
• 使用更好的算法和默认形为，提升长期缓存的效果
• 使用更好的 Tree Shaking 算法和代码生成方式，减少打包后的体积
• 提升 web 平台的兼容性
• 在不引入破坏性变更的前提下，清理掉为实现 v4 功能而遗留下的奇怪的内部架构
• 现在的破坏性变更是为将来实现更多的功能打好基础，让我们可以在 v5 版停留尽可能长的时间

Chrome 86 支持文件系统

File System Access（文件系统访问）

简单说，这个 API 允许用户与用户本地设备上的文件进行交互，相当于用户主动授权某些文件或目录给当前网站

然后 JS 就可以从文件里读内容，或者把内容写入文件。

当然，从安全角度出发，网页不能任意访问文件，一定要用户主动选择

代码示例：

  //  文件句柄
  let fileHandle;
  openFile.addEventListener('click', async () => {
    // 打开文件选择器
    [fileHandle] = await window.showOpenFilePicker();
    // 获取文件信息
    const file = await fileHandle.getFile();
    // 获取文件内容
    const contents = await file.text()
    // 将文件内容展示到需要的地方
    textArea.value = contents;
  });

  saveFile.addEventListener('click', async () => {
    // 使用之前的文件句柄
    const writable = await fileHandle.createWritable();
    // 写入新的内容内容
    await writable.write('new content');
    await writable.close();
  });

相关链接

https://webpack.js.org/blog/2020-10-10-webpack-5-release/
https://web.dev/file-system-access/

- END -