Modul nicht gefunden: Fehler: 'fs' kann mit webpack nicht aufgelöst werden

Question

Ich habe einen kleinen Code zum Erstellen von Webpacks erstellt. Die Quelle Eintrag Datei ist wie:

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) 

    } 

    //...... 
} 

Die webpack config:

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

Die wichtigsten app.js ruft einfach myTestClass:

import MyClass from './myTestClass.js' 

module.exports = async function() { 

const myCls = new MyClass(); 

return ''; 
}; 

Lauf webpack, bekam ich viele gleiche Fehler :

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

Wenn ich den Kommentar in https://github.com/webpack-contrib/css-loader/issues/447 gefolgt, das heißt

node:{ 
    fs:'empty' 
} 

Es gebaut werden kann, aber wenn Sie den Code auf dem Client ausgeführt wird, wird ein Fehler aus den build.js herausspringen. Der Fehler ist: fs ist undefiniert. Ich denke, das liegt daran, dass fs des Knotens auf leer gesetzt ist.

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

Können Sie ein Licht wie dieses Problem lösen? ist das eine korrekte Verwendung um fs = leer zu setzen? Wenn es richtig ist, welches Problem mit der build.js?

Vielen Dank!

Answer 1

Sie können fs auf Client-Seite benötigen Sie den folgenden Code in webpack.config.js mit

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

auch innerhalb module.exports hinzufügen

externals: nodeModules, 
    target: 'node', 

dies würde Ihnen helfen fs innerhalb Client erforderlich Seite.