モジュールが見つかりません：エラー：webpackで 'fs'を解決できません

Question

webpackで構築するための小さなコードを作成しました。 myTestClass

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単に呼び出します：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) 

    } 

    //...... 
} 

：のようなソース・エントリのファイルがある

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

あなたは、これはクライアント内部の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', 

を追加webpack.config.jsに次のコードを使用して、クライアント側でのFSを必要とすることができます側。