为什么在webpack中要设置node.fs: 'empty'？

Question

我看到这个错误 "Module not found: Error: Can't resolve 'fs' in ....."，解决方案是：

// webpack 4
node: {
    fs: "empty"
}


//webpack5
   resolve: {
    extensions: [".ts", ".tsx", ".js", ".css"],
    fallback: {
      fs: false,
    },
  },

然而我不知道"fs:false"或"empty"是什么意思？

- Yilmaz

---

你读过 https://webpack.js.org/configuration/ 吗？ - Thomas Sablik

Answer 1

它的意思是一样的。有时候，一些模块使用原生的Node.js模块，比如fs，当Webpack打包为浏览器环境时，会尝试将其打包在一起。由于fs在浏览器环境中不可用或者根本没有意义，所以Webpack会抛出模块未找到的错误。

为fs指定值为"empty"或false，就是告诉Webpack忽略该模块，不要尝试将其打包。

为什么会发生这种情况？一些模块是同构的，即支持浏览器和node.js。像Webpack这样的打包工具不能简单地确定是否应该排除原生模块。（使用ESM模块、摇树优化和sideEffect，Webpack可以很好地处理这个问题。）

- Harshal Patil

---

如果用户通过showdirectorypicker或使用导航器中的沙盒目录授予实际/写入权限，FS可以轻松地包含在浏览器中。 - B''H Bi'ezras -- Boruch Hashem