未找到模块：错误：无法使用 webpack 解析“fs”答案

【问题标题】：Module not found: Error: Can't resolve 'fs' with webpack未找到模块：错误：无法使用 webpack 解析“fs”
【发布时间】：2018-04-11 17:11:59
【问题描述】：

我为 webpack 生成了一个小代码。源码入口文件是这样的：

import archiver from 'archiver'
import request from 'request'
import mkdirp from 'mkdirp'
import Zip from 'node-zip'
import Zlib from 'zlib'
import path from 'path'
import fs from 'fs'

export default class myTestClass {


   constructor (config) {

    super (config)

   }

  //......
}

webpack 配置是：

var webpack = require('webpack');
var path = require('path')


module.exports = {
    entry: [
        path.resolve("./js/app.js") 
  ],
   output: {
      path: path.resolve('./build'),
      filename: "build.js"
  }, 
  module: {
     loaders: [
        { test: /\.css$/, loader: 'style-loader!css-loader' },

        { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
        { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'},
        { test: /\.json$/, loader: 'json-loader' },
        { test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
              presets: ['es2015'],
              plugins: ['transform-runtime']
            }
        } 

    ]

},

resolve: {
    modules: [
      "./js", 
      "./node_modules"
    ],
    extensions : ['.js', '.jsx', '.json']
  },
  resolveLoader: {
    modules: ['node_modules']
  },
  node: {
    console: true
 },
 plugins: [
  new webpack.NoEmitOnErrorsPlugin(),
  new webpack.ProvidePlugin({
    'window.jQuery': 'jquery',
    Promise: 'bluebird',
    jQuery: 'jquery',
    $: 'jquery'
  })
 ]
};

主 app.js 只调用 myTestClass：

import MyClass from './myTestClass.js'

module.exports = async function() {

 const myCls = new MyClass();

return '';
};

运行 webpack，我遇到了很多相同的错误：

Module not found: Error: Can't resolve 'fs'

如果我按照https://github.com/webpack-contrib/css-loader/issues/447 中的评论，即

node:{
   fs:'empty'
 }

可以构建，但是在客户端运行代码时，build.js会弹出错误。错误是：fs 未定义。我认为这是因为节点的 fs 设置为空。

var fs$ReadStream = fs.ReadStream
ReadStream.prototype = Object.create(fs$ReadStream.prototype)
ReadStream.prototype.open = ReadStream$open

您能否说明如何解决此问题？设置 fs = empty 是正确的用法吗？如果正确，build.js 有什么问题？

谢谢！

【问题讨论】：

我想我有什么问题。我混淆了服务器端模块和客户端工作流程:)
是的。 webpack 有一个配置选项 'target' (webpack.js.org/concepts/targets)，你可以在你的配置文件中使用它。如果要捆绑 nodejs，请设置“目标：'node'”。对于客户端/浏览器设置“目标：'web'”。要同时执行服务器/客户端，请参阅medium.com/code-oil/…

标签： node.js webpack

【解决方案1】：

您可以使用 webpack.config.js 中的以下代码在客户端要求 fs

var fs = require('fs');

var nodeModules = {};
fs.readdirSync('node_modules')
  .filter(function(x) {
    return ['.bin'].indexOf(x) === -1;
  })
  .forEach(function(mod) {
    nodeModules[mod] = 'commonjs ' + mod;
  });

同时在 module.exports 中添加

  externals: nodeModules,
  target: 'node',

这将帮助您在客户端要求 fs。

【讨论】：

【解决方案2】：

如果使用 Webpack 4，我会遇到同样的错误：

Module not found: Error: Can't resolve 'fs' in ...

我通过将部分添加到 webpack.config.js 文件的根目录来修复此错误：

...
node: {
  fs: "empty",
},
...

【讨论】：

【解决方案3】：

在某些时候，我使用过这个包括：

import { TRUE } from "node-sass";

我只是把它注释掉了。我到处跑，想弄清楚发生了什么变化！道德：有时不仅仅是追逐错误（因为我得到了各种各样的建议）。这也是关于回顾你所做的事情！

这是未注释代码的 FULL 错误：

`WARNING in ./node_modules/node-sass/lib/binding.js 19:9-37
 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/node-sass/lib/index.js
 @ ./src/components/form/Form.js
 @ ./src/components/app/App.js
 @ ./src/index.js

 ERROR in ./node_modules/fs.realpath/index.js
 Module not found: Error: Can't resolve 'fs' in 
 'D:\dev\xyz.io.1\node_modules\fs.realpath'
 @ ./node_modules/fs.realpath/index.js 8:9-22
 @ ./node_modules/glob/glob.js
 @ ./node_modules/true-case-path/index.js
 @ ./node_modules/node-sass/lib/extensions.js
 @ ./node_modules/node-sass/lib/index.js
 @ ./src/components/form/Form.js
 @ ./src/components/app/App.js
 @ ./src/index.js

 ERROR in ./node_modules/fs.realpath/old.js
 Module not found: Error: Can't resolve 'fs' in 
 'D:\dev\xyz.io.1\node_modules\fs.realpath'
 @ ./node_modules/fs.realpath/old.js 24:9-22
 @ ./node_modules/fs.realpath/index.js
 @ ./node_modules/glob/glob.js
 @ ./node_modules/true-case-path/index.js
 @ ./node_modules/node-sass/lib/extensions.js
 @ ./node_modules/node-sass/lib/index.js
 @ ./src/components/form/Form.js
 @ ./src/components/app/App.js
 @ ./src/index.js

 ERROR in ./node_modules/glob/glob.js
 Module not found: Error: Can't resolve 'fs' in 
 'D:\dev\xyz.io.1\node_modules\glob'
 @ ./node_modules/glob/glob.js 43:9-22
 @ ./node_modules/true-case-path/index.js
 @ ./node_modules/node-sass/lib/extensions.js
 @ ./node_modules/node-sass/lib/index.js
 @ ./src/components/form/Form.js
 @ ./src/components/app/App.js
 @ ./src/index.js

 ERROR in ./node_modules/glob/sync.js
 Module not found: Error: Can't resolve 'fs' in 
 'D:\dev\xyz.io.1\node_modules\glob'
 @ ./node_modules/glob/sync.js 4:9-22
 @ ./node_modules/glob/glob.js
 @ ./node_modules/true-case-path/index.js
 @ ./node_modules/node-sass/lib/extensions.js
 @ ./node_modules/node-sass/lib/index.js
 @ ./src/components/form/Form.js
 @ ./src/components/app/App.js
 @ ./src/index.js

 ERROR in ./node_modules/mkdirp/index.js
 Module not found: Error: Can't resolve 'fs' in 
 'D:\dev\xyz.io.1\node_modules\mkdirp'
 @ ./node_modules/mkdirp/index.js 2:9-22
 @ ./node_modules/node-sass/lib/extensions.js
 @ ./node_modules/node-sass/lib/index.js
 @ ./src/components/form/Form.js
 @ ./src/components/app/App.js
 @ ./src/index.js

 ERROR in ./node_modules/node-sass/lib/extensions.js
 Module not found: Error: Can't resolve 'fs' in 
 'D:\dev\xyz.io.1\node_modules\node-sass\lib'
 @ ./node_modules/node-sass/lib/extensions.js 6:7-20
 @ ./node_modules/node-sass/lib/index.js
 @ ./src/components/form/Form.js
 @ ./src/components/app/App.js
 @ ./src/index.js
 i ｢wdm｣: Failed to compile.`

【讨论】：