如何在Webpack 4.46.0中解决fs模块无法解析的问题？

核心原因 #

fs是Node.js专属的内置文件系统模块，浏览器环境完全不支持。你安装的fs@0.0.1-security只是一个安全占位包，没有实际功能，完全没必要安装。Webpack在打包前端代码时，默认不会处理Node.js内置模块，所以会出现找不到fs的报错。

解决方案 #

1. 删除无用的fs依赖 #

执行命令移除不必要的依赖：

npm uninstall fs

2. 修改Webpack配置，处理Node内置模块 #

针对你的Webpack 4版本，在webpack.config.js中添加node配置项，告诉Webpack将fs模块替换为空对象，避免打包报错：

修改后的完整配置：

const path = require("path");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new CopyWebpackPlugin([{ from: "./src/index.html", to: "index.html" }]),
  ],
  devServer: { contentBase: path.join(__dirname, "dist"), compress: true },
  // 添加以下配置
  node: {
    fs: 'empty',
    // 如果后续出现其他Node模块（如path、net）的报错，可在此继续添加
    // path: 'empty',
    // net: 'empty'
  }
};

3. 检查业务代码（关键） #

如果你的前端代码里主动引入了fs（比如import fs from 'fs'或require('fs')），请直接删除这段代码。浏览器环境无法通过fs操作文件，如需处理文件，应该使用浏览器原生的File API（比如通过<input type="file">获取文件后操作）。

额外说明 #

如果是依赖包（如ipfs-http-client）内部引入了fs，上述Webpack配置会自动将其替换为空对象，不影响依赖包在浏览器环境的正常运行——这类依赖通常会针对浏览器环境做降级处理，不需要fs功能。

内容的提问来源于stack exchange，提问作者P00