Webpack 报错：Cannot find module 'fs' 怎么解决？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，Webpack 是一个非常重要的工具，用于将多个模块打包成一个或多个文件，以便于在浏览器中使用。然而，在使用 Webpack 进行打包时，有时候会出现如下错误：Cannot find module 'fs'。这个错误是因为 Webpack 中缺少了 Node.js 中的 fs 模块。

解决方法

方法一：使用 node-libs-browser

node-libs-browser 是一个适用于浏览器的 Node.js 标准库实现，可以在浏览器中使用 Node.js 的标准库。在使用 Webpack 进行打包时，可以使用 node-libs-browser 来解决缺少 fs 模块的问题。

安装 node-libs-browser：

npm install node-libs-browser --save-dev

在 Webpack 的配置文件中添加如下代码：
```
const nodeLibs = require('node-libs-browser');

module.exports = {
  // ...
  resolve: {
    fallback: nodeLibs,
  },
};
```
这样，Webpack 就会在打包时使用 node-libs-browser 来提供 fs 模块了。

方法二：使用 webpack-node-externals

webpack-node-externals 是一个 Webpack 插件，可以将 Node.js 的模块排除在打包之外。在使用 Webpack 进行打包时，可以使用 webpack-node-externals 来排除 fs 模块的打包。

安装 webpack-node-externals：

npm install webpack-node-externals --save-dev

在 Webpack 的配置文件中添加如下代码：

const nodeExternals = require('webpack-node-externals');

module.exports = {
  // ...
  target: 'node',
  externals: [nodeExternals()],
};

这样，Webpack 就会在打包时自动排除 fs 模块的打包了。

示例代码

下面是一个示例代码，演示了如何使用 node-libs-browser 解决 Cannot find module 'fs' 的问题：

-- -------------------- ---- -------
----- ---- - ----------------

----- ----------------- - -------------------------------
----- -------- - -----------------------------

-------------- - -
  ------ -----------------
  ------- -
    ----- ----------------------- --------
    --------- ------------
  --
  -------- -
    --------- ---------
  --
  -------- -
    --- -------------------
      --------- -------------------
    ---
  --
--

结论

以上就是解决 Webpack 报错 Cannot find module 'fs' 的两种方法，分别是使用 node-libs-browser 和 webpack-node-externals。两种方法各有优劣，可以根据实际情况选择。在使用 Webpack 进行前端开发时，遇到问题不要慌张，可以通过搜索和阅读文档来寻找解决方法。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/672737ad2e7021665e1c76ae