Question

我为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会出现什么问题？

谢谢！

Answer 1

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

<div class="container">
   <div class="row">
      <div class="col-lg-4" style="height: 200px"> i am a div of height 
      200px</div>
      <div class="col-lg-4" style="height: 400px"> i am a div of height 
      400px</div>
      <div class="col-lg-4" style="height: 300px"> i am a div of height 
      300px</div>
      <div class="col-lg-4" style="height: 500px"> i am a div of height 
      500px</div>
   </div>
</div>


row{ display: flex; flex-wrap: nowrap}

还添加了module.exports

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;
  });

这可以帮助你在客户端内部要求fs。

Answer 2

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

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

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

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

Answer 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.`

找不到模块：错误：无法使用webpack解析'fs'

3 个答案: