与webpack的反应-本地网站:无法解决fs

Question

我开发了一个react本机应用程序，它功能强大，在本地设备中运行良好。现在，我们的客户希望从现有的应用程序导出PWA。因此，我安装了react-native-web并添加了所需的配置和依赖项(webpack和Bable)。但是我根本不能运行webpack的开发服务器，而且我得到了很多Module not found: Error: Can't resolve 'fs' in ./node_modules/bunch-of-folders错误。但我找不到解决办法。以下是错误列表：

ERROR in ./node_modules/worker-farm/lib/fork.js
Module not found: Error: Can't resolve 'child_process' in 'C:\programming\react-native\wallet\node_modules\worker-farm\lib'
 @ ./node_modules/worker-farm/lib/fork.js 3:21-45
 @ ./node_modules/worker-farm/lib/farm.js
 @ ./node_modules/worker-farm/lib/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/cacache/get.js
Module not found: Error: Can't resolve 'fs' in 'C:\programming\react-native\wallet\node_modules\cacache'
 @ ./node_modules/cacache/get.js 6:11-24
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/cacache/node_modules/graceful-fs/graceful-fs.js
Module not found: Error: Can't resolve 'fs' in 'C:\programming\react-native\wallet\node_modules\cacache\node_modules\graceful-fs'
 @ ./node_modules/cacache/node_modules/graceful-fs/graceful-fs.js 1:9-22
 @ ./node_modules/cacache/lib/entry-index.js
 @ ./node_modules/cacache/ls.js
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/chokidar/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\programming\react-native\wallet\node_modules\chokidar'
 @ ./node_modules/chokidar/index.js 4:11-24
 @ ./node_modules/watchpack/lib/chokidar.js
 @ ./node_modules/watchpack/lib/DirectoryWatcher.js
 @ ./node_modules/watchpack/lib/watcherManager.js
 @ ./node_modules/watchpack/lib/watchpack.js
 @ (webpack)/lib/node/NodeWatchFileSystem.js
 @ (webpack)/lib/node/NodeEnvironmentPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/chokidar/lib/fsevents-handler.js
Module not found: Error: Can't resolve 'fs' in 'C:\programming\react-native\wallet\node_modules\chokidar\lib'
 @ ./node_modules/chokidar/lib/fsevents-handler.js 3:11-24
 @ ./node_modules/chokidar/index.js
 @ ./node_modules/watchpack/lib/chokidar.js
 @ ./node_modules/watchpack/lib/DirectoryWatcher.js
 @ ./node_modules/watchpack/lib/watcherManager.js
 @ ./node_modules/watchpack/lib/watchpack.js
 @ (webpack)/lib/node/NodeWatchFileSystem.js
 @ (webpack)/lib/node/NodeEnvironmentPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/chokidar/lib/nodefs-handler.js
Module not found: Error: Can't resolve 'fs' in 'C:\programming\react-native\wallet\node_modules\chokidar\lib'
 @ ./node_modules/chokidar/lib/nodefs-handler.js 3:11-24
 @ ./node_modules/chokidar/index.js
 @ ./node_modules/watchpack/lib/chokidar.js
 @ ./node_modules/watchpack/lib/DirectoryWatcher.js
 @ ./node_modules/watchpack/lib/watcherManager.js
 @ ./node_modules/watchpack/lib/watchpack.js
 @ (webpack)/lib/node/NodeWatchFileSystem.js
 @ (webpack)/lib/node/NodeEnvironmentPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/chownr/chownr.js
Module not found: Error: Can't resolve 'fs' in 'C:\programming\react-native\wallet\node_modules\chownr'
 @ ./node_modules/chownr/chownr.js 2:11-24
 @ ./node_modules/cacache/lib/util/fix-owner.js
 @ ./node_modules/cacache/lib/util/tmp.js
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/copy-concurrently/copy.js
Module not found: Error: Can't resolve 'fs' in 'C:\programming\react-native\wallet\node_modules\copy-concurrently'
 @ ./node_modules/copy-concurrently/copy.js 8:13-26
 @ ./node_modules/move-concurrently/move.js
 @ ./node_modules/cacache/lib/util/move-file.js
 @ ./node_modules/cacache/lib/content/write.js
 @ ./node_modules/cacache/put.js
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/find-cache-dir/node_modules/make-dir/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\programming\react-native\wallet\node_modules\find-cache-dir\node_modules\make-dir'
 @ ./node_modules/find-cache-dir/node_modules/make-dir/index.js 2:11-24
 @ ./node_modules/find-cache-dir/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/fs.realpath/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\programming\react-native\wallet\node_modules\fs.realpath'
 @ ./node_modules/fs.realpath/index.js 8:9-22
 @ ./node_modules/glob/glob.js
 @ ./node_modules/rimraf/rimraf.js
 @ ./node_modules/cacache/rm.js
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/fs.realpath/old.js
Module not found: Error: Can't resolve 'fs' in 'C:\programming\react-native\wallet\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/rimraf/rimraf.js
 @ ./node_modules/cacache/rm.js
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/glob/common.js
Module not found: Error: Can't resolve 'fs' in 'C:\programming\react-native\wallet\node_modules\glob'
 @ ./node_modules/glob/common.js 13:9-22
 @ ./node_modules/glob/glob.js
 @ ./node_modules/rimraf/rimraf.js
 @ ./node_modules/cacache/rm.js
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/graceful-fs/graceful-fs.js
Module not found: Error: Can't resolve 'fs' in 'C:\programming\react-native\wallet\node_modules\graceful-fs'
 @ ./node_modules/graceful-fs/graceful-fs.js 1:9-22
 @ ./node_modules/enhanced-resolve/lib/NodeJsInputFileSystem.js
 @ (webpack)/lib/node/NodeEnvironmentPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/infer-owner/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\programming\react-native\wallet\node_modules\infer-owner'
 @ ./node_modules/infer-owner/index.js 2:11-24
 @ ./node_modules/cacache/lib/util/fix-owner.js
 @ ./node_modules/cacache/lib/util/tmp.js
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/is-wsl/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\programming\react-native\wallet\node_modules\is-wsl'
 @ ./node_modules/is-wsl/index.js 3:11-24
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/loader-runner/lib/LoaderRunner.js
Module not found: Error: Can't resolve 'fs' in 'C:\programming\react-native\wallet\node_modules\loader-runner\lib'
 @ ./node_modules/loader-runner/lib/LoaderRunner.js 5:9-22
 @ (webpack)/lib/NormalModule.js
 @ (webpack)/lib/AutomaticPrefetchPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/mkdirp/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\programming\react-native\wallet\node_modules\mkdirp'
 @ ./node_modules/mkdirp/index.js 2:9-22
 @ (webpack)/lib/debug/ProfilingPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/move-concurrently/move.js
Module not found: Error: Can't resolve 'fs' in 'C:\programming\react-native\wallet\node_modules\move-concurrently'
 @ ./node_modules/move-concurrently/move.js 4:13-26
 @ ./node_modules/cacache/lib/util/move-file.js
 @ ./node_modules/cacache/lib/content/write.js
 @ ./node_modules/cacache/put.js
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/path-exists/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\programming\react-native\wallet\node_modules\path-exists'
 @ ./node_modules/path-exists/index.js 2:11-24
 @ ./node_modules/find-cache-dir/node_modules/locate-path/index.js
 @ ./node_modules/find-cache-dir/node_modules/find-up/index.js
 @ ./node_modules/find-cache-dir/node_modules/pkg-dir/index.js
 @ ./node_modules/find-cache-dir/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/readdirp/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\programming\react-native\wallet\node_modules\readdirp'
 @ ./node_modules/readdirp/index.js 3:11-24
 @ ./node_modules/chokidar/index.js
 @ ./node_modules/watchpack/lib/chokidar.js
 @ ./node_modules/watchpack/lib/DirectoryWatcher.js
 @ ./node_modules/watchpack/lib/watcherManager.js
 @ ./node_modules/watchpack/lib/watchpack.js
 @ (webpack)/lib/node/NodeWatchFileSystem.js
 @ (webpack)/lib/node/NodeEnvironmentPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/rimraf/rimraf.js
Module not found: Error: Can't resolve 'fs' in 'C:\programming\react-native\wallet\node_modules\rimraf'
 @ ./node_modules/rimraf/rimraf.js 6:9-22
 @ ./node_modules/cacache/rm.js
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/schema-utils/src/validateOptions.js
Module not found: Error: Can't resolve 'fs' in 'C:\programming\react-native\wallet\node_modules\schema-utils\src'
 @ ./node_modules/schema-utils/src/validateOptions.js 8:11-24
 @ ./node_modules/schema-utils/src/index.js
 @ (webpack)/lib/IgnorePlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/snapdragon/lib/source-maps.js
Module not found: Error: Can't resolve 'fs' in 'C:\programming\react-native\wallet\node_modules\snapdragon\lib'
 @ ./node_modules/snapdragon/lib/source-maps.js 3:9-22
 @ ./node_modules/snapdragon/lib/compiler.js
 @ ./node_modules/snapdragon/index.js
 @ (webpack)/node_modules/micromatch/lib/utils.js
 @ (webpack)/node_modules/micromatch/index.js
 @ (webpack)/lib/optimize/SideEffectsFlagPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/watchpack-chokidar2/node_modules/chokidar/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\programming\react-native\wallet\node_modules\watchpack-chokidar2\node_modules\chokidar'
 @ ./node_modules/watchpack-chokidar2/node_modules/chokidar/index.js 3:9-22
 @ ./node_modules/watchpack-chokidar2/index.js
 @ ./node_modules/watchpack/lib/chokidar.js
 @ ./node_modules/watchpack/lib/DirectoryWatcher.js
 @ ./node_modules/watchpack/lib/watcherManager.js
 @ ./node_modules/watchpack/lib/watchpack.js
 @ (webpack)/lib/node/NodeWatchFileSystem.js
 @ (webpack)/lib/node/NodeEnvironmentPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/watchpack-chokidar2/node_modules/chokidar/lib/fsevents-handler.js
Module not found: Error: Can't resolve 'fs' in 'C:\programming\react-native\wallet\node_modules\watchpack-chokidar2\node_modules\chokidar\lib'      
 @ ./node_modules/watchpack-chokidar2/node_modules/chokidar/lib/fsevents-handler.js 3:9-22
 @ ./node_modules/watchpack-chokidar2/node_modules/chokidar/index.js
 @ ./node_modules/watchpack-chokidar2/index.js
 @ ./node_modules/watchpack/lib/chokidar.js
 @ ./node_modules/watchpack/lib/DirectoryWatcher.js
 @ ./node_modules/watchpack/lib/watcherManager.js
 @ ./node_modules/watchpack/lib/watchpack.js
 @ (webpack)/lib/node/NodeWatchFileSystem.js
 @ (webpack)/lib/node/NodeEnvironmentPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/watchpack-chokidar2/node_modules/chokidar/lib/nodefs-handler.js
Module not found: Error: Can't resolve 'fs' in 'C:\programming\react-native\wallet\node_modules\watchpack-chokidar2\node_modules\chokidar\lib'      
 @ ./node_modules/watchpack-chokidar2/node_modules/chokidar/lib/nodefs-handler.js 3:9-22
 @ ./node_modules/watchpack-chokidar2/node_modules/chokidar/index.js
 @ ./node_modules/watchpack-chokidar2/index.js
 @ ./node_modules/watchpack/lib/chokidar.js
 @ ./node_modules/watchpack/lib/DirectoryWatcher.js
 @ ./node_modules/watchpack/lib/watcherManager.js
 @ ./node_modules/watchpack/lib/watchpack.js
 @ (webpack)/lib/node/NodeWatchFileSystem.js
 @ (webpack)/lib/node/NodeEnvironmentPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in (webpack)/lib/debug/ProfilingPlugin.js
Module not found: Error: Can't resolve 'fs' in 'C:\programming\react-native\wallet\node_modules\webpack\lib\debug'
 @ (webpack)/lib/debug/ProfilingPlugin.js 1:11-24
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in (webpack)/lib/node/NodeOutputFileSystem.js
Module not found: Error: Can't resolve 'fs' in 'C:\programming\react-native\wallet\node_modules\webpack\lib\node'
 @ (webpack)/lib/node/NodeOutputFileSystem.js 7:11-24
 @ (webpack)/lib/node/NodeEnvironmentPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in (webpack)/lib/node/NodeMainTemplateAsync.runtime.js
Module not found: Error: Can't resolve 'fs' in 'C:\programming\react-native\wallet\node_modules\webpack\lib\node'
 @ (webpack)/lib/node/NodeMainTemplateAsync.runtime.js 16:2-15 34:3-16
 @ (webpack)/lib/node/NodeMainTemplatePlugin.js
 @ (webpack)/lib/node/NodeTemplatePlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in ./node_modules/y18n/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\programming\react-native\wallet\node_modules\y18n'
 @ ./node_modules/y18n/index.js 1:9-22
 @ ./node_modules/cacache/lib/util/y.js
 @ ./node_modules/cacache/locales/en.js
 @ ./node_modules/cacache/index.js
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in (webpack)/lib/NormalModule.js
Module not found: Error: Can't resolve 'module' in 'C:\programming\react-native\wallet\node_modules\webpack\lib'
 @ (webpack)/lib/NormalModule.js 7:21-38
 @ (webpack)/lib/AutomaticPrefetchPlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

ERROR in (webpack)/lib/node/NodeTargetPlugin.js
Module not found: Error: Can't resolve 'module' in 'C:\programming\react-native\wallet\node_modules\webpack\lib\node'
 @ (webpack)/lib/node/NodeTargetPlugin.js 11:1-18
 @ (webpack)/lib/node sync ^\.\/.*$
 @ (webpack)/lib/node/NodeMainTemplate.runtime.js
 @ (webpack)/lib/node/NodeMainTemplatePlugin.js
 @ (webpack)/lib/node/NodeTemplatePlugin.js
 @ (webpack)/lib/webpack.js
 @ ./web/webpack.config.js
 @ multi ./web/webpack.config.js

Babel.config.js：

module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: [
    ["module-resolver", {
      "alias": {
        "^react-native$": "react-native-web"
      }
    }], "react-native-reanimated/plugin"]
};

webpack.config.js：

// web/webpack.config.js

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

const appDirectory = path.resolve(__dirname, '../');

const babelLoaderConfiguration = {
  test: /\.(js|jsx)$/,
  include: [
    path.resolve(appDirectory, 'index.web.js'),
    path.resolve(appDirectory, 'src'),
    path.resolve(appDirectory, 'node_modules/react-native-uncompiled')
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      presets: ['module:metro-react-native-babel-preset'],
      plugins: ['react-native-web']
    }
  }
};

const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png|svg)$/,
  use: {
    loader: 'url-loader',
    options: {
      name: '[name].[ext]',
      esModule: false,
    }
  }
};

module.exports = {
  entry: [
    path.resolve(appDirectory, 'index.web.js')
  ],

  output: {
    filename: 'bundle.web.js',
    path: path.resolve(appDirectory, 'dist')
  },

  // ...the rest of your config

  module: {
    rules: [
      babelLoaderConfiguration,
      imageLoaderConfiguration
    ]
  },

  resolve: {
    alias: {
      'react-native$': 'react-native-web'
    },
    extensions: ['.web.js', '.js', '.web.jsx', '.jsx']
  }
}

package.json：

{
  "homepage": ".",
  "name": "wallet",
  "version": "1.1.0",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint .",
    "postversion": "react-native-version --never-amend",
    "start-web": "./node_modules/.bin/webpack-dev-server -d --config ./web/webpack.config.js --hot",
    "build-web": "./node_modules/.bin/webpack --config ./web/webpack.config.js"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "1.15.14",
    "@react-native-clipboard/clipboard": "1.8.5",
    "@react-native-community/blur": "3.6.0",
    "@react-native-community/masked-view": "0.1.11",
    "@react-native-community/slider": "4.1.12",
    "@react-native-firebase/app": "14.2.4",
    "@react-native-firebase/messaging": "14.2.4",
    "@react-navigation/bottom-tabs": "6.0.9",
    "@react-navigation/native": "6.0.6",
    "@react-navigation/stack": "6.0.11",
    "axios": "0.24.0",
    "d3-shape": "3.1.0",
    "i18next": "^21.6.11",
    "moment": "2.29.1",
    "moment-jalaali": "0.9.4",
    "moment-timezone": "0.5.34",
    "react": "17.0.2",
    "react-dom": "^17.0.2",
    "react-freeze": "1.0.0",
    "react-i18next": "^11.15.4",
    "react-native": "0.66.4",
    "react-native-animatable": "1.3.3",
    "react-native-camera": "4.2.1",
    "react-native-contacts": "7.0.3",
    "react-native-device-info": "8.4.8",
    "react-native-elements": "3.4.2",
    "react-native-flags": "1.0.0",
    "react-native-gesture-handler": "2.1.0",
    "react-native-keyboard-aware-scroll-view": "0.9.5",
    "react-native-linear-gradient": "2.5.6",
    "react-native-navigation-bar-color": "^2.0.1",
    "react-native-network-info": "5.2.1",
    "react-native-permissions": "3.2.0",
    "react-native-qrcode-scanner": "1.5.4",
    "react-native-reanimated": "2.4.1",
    "react-native-restart": "0.0.23",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "3.10.1",
    "react-native-splash-screen": "3.3.0",
    "react-native-svg": "12.1.1",
    "react-native-svg-charts": "5.4.0",
    "react-native-toast-message": "2.1.1",
    "react-native-touch-id": "4.4.1",
    "react-native-vector-icons": "9.0.0",
    "react-native-web": "^0.17.6",
    "react-redux": "7.2.6",
    "redux": "4.1.2",
    "redux-persist": "6.0.0",
    "redux-thunk": "2.4.1",
    "reselect": "4.1.5",
    "webpack": "4.46.0"
  },
  "devDependencies": {
    "@babel/core": "7.12.9",
    "@babel/runtime": "7.12.5",
    "@react-native-community/eslint-config": "2.0.0",
    "babel-jest": "26.6.3",
    "babel-loader": "^8.2.3",
    "babel-plugin-module-resolver": "^4.1.0",
    "babel-plugin-react-native-web": "^0.17.6",
    "eslint": "7.14.0",
    "jest": "26.6.3",
    "metro-react-native-babel-preset": "0.66.2",
    "react-native-version": "^4.0.0",
    "react-test-renderer": "17.0.2",
    "url-loader": "^4.1.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  },
  "jest": {
    "preset": "react-native"
  }
}

Answer 1

fs通常是文件系统的缩写，在浏览器中是不可用的.但是，来自File-object的JavaScript仍然可用。因此，如果您试图解决创建文件和导出文件的问题，一种解决方案可能是创建一个包含内容的File-object，然后从那里继续。