使用 webpack 时节点找不到模块“fs”答案

【问题标题】：Node cannot find module "fs" when using webpack使用 webpack 时节点找不到模块“fs”
【发布时间】：2017-01-08 00:31:57
【问题描述】：

我正在使用 node.js 和 webpack 创建一个包。根据我的阅读，node.js 应该包含用于管理文件的fs 模块。然而，当我打电话给require("fs") 时，我得到一个Cannot find module "fs" 错误。我该怎么办？

【问题讨论】：

标签： node.js webpack

【解决方案1】：

我自己在捆绑 webpack 时遇到了这个问题，并在 this thread 上找到了答案。

为我解决它的方法是使用以下配置：

module.exports = {
  entry: "./app",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
      loaders: [
          {  
              test: /\.js$/,
              exclude: 'node_modules',
              loader: 'babel',
              query: {presets: ['es2015']},
          }
      ]
  },
  target: 'node'
};

通过将目标设置为节点，webpack 将进行必要的更改以捆绑您的节点应用程序

编辑：此答案针对的 webpack 1.x 现在已被取代。

【讨论】：

尽管 webpack 更新很多，target: 'node' 行仍然很重要，是什么让它在 webpack v4 上工作

【解决方案2】：

如果您在 nodejs 环境中运行 webpack 包，则在 webpack.config.js 文件中需要 target: 'node' 否则 webpack 将默认值作为目标 check here 的 web。

您可以通过两种方式解决问题

将以下配置添加到您的 webpack.config.js

node: {
    fs: "empty"
}

或

将以下配置添加到您的 package.json 中

"browser": {
    "fs": false
}

编辑：

有希望的修复是

"browser": {
   "fs": false
}

【讨论】：

添加 fs 后出现此错误。配置对象无效。 Webpack 已使用与 API 模式不匹配的配置对象进行初始化。 - configuration.node 具有未知属性“fs”。这些属性是有效的：object { __dirname?, __filename?, global? } -> 节点兼容性功能的选项对象。
@SuuSoJeat 那是因为你的 webpack 版本比这个答案更新，see my answer 代替
添加 node: { fs: "empty" } 到 webpack.config.js 没有用，但是添加 "browser": { "fs": false } 到 package.json 了！成功！
package.json 条目完成了这项工作。谢谢:)
我在一些遗留代码中遇到了“路径”问题，我做了完全相反的事情。删除 "browser": { "path": false} 现在 webpack 注入了正确的对象！

【解决方案3】：

我在使用 webworkers 捆绑 NWjs 应用程序时遇到了同样的问题（这反过来又启用了节点）。

我找到的解决方案是将我在externals 中使用的每个本机模块都包含在模块名称中，并带有前缀commonjs。例如：

    ...
    target: "webworker", // or 'node' or 'node-webkit'
    externals:{
        fs:    "commonjs fs",
        path:  "commonjs path"
    }
    ...

我对不同项目中的目标“webworker”和“node-webkit”做了同样的事情来解决同样的问题。

webpack nwjs webworker nodejs node

【讨论】：

【解决方案4】：

将以下配置添加到您的 webpack.config.js

resolve: {
  fallback: {
    fs: false
  }
}

【讨论】：

更新到 laravel-mix v6 时这对我有用
@kia nasirzadeh 我在 Laravel 8 中遇到了类似的错误，我无法解决。请你帮助我好吗？ stackoverflow.com/questions/68032168/…

【解决方案5】：

在尝试了我在互联网上找到的所有内容（target、externals、node configs）之后，唯一对我有用的解决方案是替换：

const filesystem = require("fs")
        or
import fs from "fs"

通过特殊的 webpack 版本

const fs = __non_webpack_require__("fs")

这会生成一个不被 webpack 解析的 require 函数。

【讨论】：

【解决方案6】：

我需要构建一个类，如果在浏览器中执行将使用fetch，如果在节点中执行则使用fs。由于其他原因，生成单独的捆绑包是不切实际的，因此我生成了一个针对浏览器的捆绑包。

如果脚本在节点中运行，我使用的解决方案是使用eval('require("fs")')。

const fs = eval('require("fs")')

浏览器安全（fs 在浏览器中是 null）：

const fs = typeof window === 'object'
    ? null
    : eval('require("fs")')

【讨论】：

【解决方案7】：

除了PDG的回答

我已经习惯了这种简短的复制/粘贴糖果。

使用 path 和 fs ：

var nodeModules = {};
fs.readdirSync(path.resolve(__dirname, 'node_modules'))
  .filter(x => ['.bin'].indexOf(x) === -1)
  .forEach(mod => { nodeModules[mod] = `commonjs ${mod}`; });

// Before your webpack configuration

module.exports = {
...
}

然后在您的配置文件中，将 nodeModules 变量包含在 externals 中

...
externals: nodeModules,
...

【讨论】：

【解决方案8】：

对于我们正在构建的解决方案，我们必须强制使用旧版本的 webpack：

npm install --save --force webpack@webpack-3

【讨论】：

【解决方案9】：

使用预定义的解决方案会更优雅：
将target: 'node' 添加到 webpack 配置文件中。

更多信息：official documentation

【讨论】：