停止监视reactjs中的文件夹更改

停止监视reactjs中的文件夹更改,reactjs,Reactjs,我正在做一个react项目,用户可以上传文件,我面临的问题是,当我上传一个文件到服务器,并将该文件保存到名为uploads的文件夹中,该文件夹位于公用文件夹中,然后当这个过程完成时,页面刷新,这是因为应用程序正在监视任何更改并刷新页面 我知道我可以通过编辑webpackdevserver.config文件来阻止这种情况,但我不知道如何做到这一点。 webpackdevserver.config: // @remove-on-eject-begin /** * Copyright (c) 201

我正在做一个react项目,用户可以上传文件,我面临的问题是,当我上传一个文件到服务器,并将该文件保存到名为uploads的文件夹中,该文件夹位于公用文件夹中,然后当这个过程完成时,页面刷新,这是因为应用程序正在监视任何更改并刷新页面 我知道我可以通过编辑webpackdevserver.config文件来阻止这种情况,但我不知道如何做到这一点。
webpackdevserver.config:

// @remove-on-eject-begin
/**
 * Copyright (c) 2015-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
// @remove-on-eject-end
'use strict';

const fs = require('fs');
const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
const ignoredFiles = require('react-dev-utils/ignoredFiles');
const redirectServedPath = require('react-dev-utils/redirectServedPathMiddleware');
const paths = require('./paths');
const getHttpsConfig = require('./getHttpsConfig');

const host = process.env.HOST || '0.0.0.0';
const sockHost = process.env.WDS_SOCKET_HOST;
const sockPath = process.env.WDS_SOCKET_PATH; // default: '/sockjs-node'
const sockPort = process.env.WDS_SOCKET_PORT;

module.exports = function(proxy, allowedHost) {
  return {
    // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
    // websites from potentially accessing local content through DNS rebinding:
    // https://github.com/webpack/webpack-dev-server/issues/887
    // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
    // However, it made several existing use cases such as development in cloud
    // environment or subdomains in development significantly more complicated:
    // https://github.com/facebook/create-react-app/issues/2271
    // https://github.com/facebook/create-react-app/issues/2233
    // While we're investigating better solutions, for now we will take a
    // compromise. Since our WDS configuration only serves files in the `public`
    // folder we won't consider accessing them a vulnerability. However, if you
    // use the `proxy` feature, it gets more dangerous because it can expose
    // remote code execution vulnerabilities in backends like Django and Rails.
    // So we will disable the host check normally, but enable it if you have
    // specified the `proxy` setting. Finally, we let you override it if you
    // really know what you're doing with a special environment variable.
    disableHostCheck:
      !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
    // Enable gzip compression of generated files.
    compress: true,
    // Silence WebpackDevServer's own logs since they're generally not useful.
    // It will still show compile warnings and errors with this setting.
    clientLogLevel: 'none',
    // By default WebpackDevServer serves physical files from current directory
    // in addition to all the virtual build products that it serves from memory.
    // This is confusing because those files won’t automatically be available in
    // production build folder unless we copy them. However, copying the whole
    // project directory is dangerous because we may expose sensitive files.
    // Instead, we establish a convention that only files in `public` directory
    // get served. Our build script will copy `public` into the `build` folder.
    // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
    // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
    // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
    // Note that we only recommend to use `public` folder as an escape hatch
    // for files like `favicon.ico`, `manifest.json`, and libraries that are
    // for some reason broken when imported through webpack. If you just want to
    // use an image, put it in `src` and `import` it from JavaScript instead.
    contentBase: paths.appPublic,
    contentBasePublicPath: paths.publicUrlOrPath,
    // By default files from `contentBase` will not trigger a page reload.
    watchContentBase: true,
    // Enable hot reloading server. It will provide WDS_SOCKET_PATH endpoint
    // for the WebpackDevServer client so it can learn when the files were
    // updated. The WebpackDevServer client is included as an entry point
    // in the webpack development configuration. Note that only changes
    // to CSS are currently hot reloaded. JS changes will refresh the browser.
    hot: true,
    // Use 'ws' instead of 'sockjs-node' on server since we're using native
    // websockets in `webpackHotDevClient`.
    transportMode: 'ws',
    // Prevent a WS client from getting injected as we're already including
    // `webpackHotDevClient`.
    injectClient: false,
    // Enable custom sockjs pathname for websocket connection to hot reloading server.
    // Enable custom sockjs hostname, pathname and port for websocket connection
    // to hot reloading server.
    sockHost,
    sockPath,
    sockPort,
    // It is important to tell WebpackDevServer to use the same "publicPath" path as
    // we specified in the webpack config. When homepage is '.', default to serving
    // from the root.
    // remove last slash so user can land on `/test` instead of `/test/`
    publicPath: paths.publicUrlOrPath.slice(0, -1),
    // WebpackDevServer is noisy by default so we emit custom message instead
    // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
    quiet: true,
    // Reportedly, this avoids CPU overload on some systems.
    // https://github.com/facebook/create-react-app/issues/293
    // src/node_modules is not ignored to support absolute imports
    // https://github.com/facebook/create-react-app/issues/1065
    watchOptions: {
      ignored: ignoredFiles(paths.appSrc),
    },
    https: getHttpsConfig(),
    host,
    overlay: false,
    historyApiFallback: {
      // Paths with dots should still use the history fallback.
      // See https://github.com/facebook/create-react-app/issues/387.
      disableDotRule: true,
      index: paths.publicUrlOrPath,
    },
    public: allowedHost,
    // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
    proxy,
    before(app, server) {
      // Keep `evalSourceMapMiddleware` and `errorOverlayMiddleware`
      // middlewares before `redirectServedPath` otherwise will not have any effect
      // This lets us fetch source contents from webpack for the error overlay
      app.use(evalSourceMapMiddleware(server));
      // This lets us open files from the runtime error overlay.
      app.use(errorOverlayMiddleware());

      if (fs.existsSync(paths.proxySetup)) {
        // This registers user provided middleware for proxy reasons
        require(paths.proxySetup)(app);
      }
    },
    after(app) {
      // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
      app.use(redirectServedPath(paths.publicUrlOrPath));

      // This service worker file is effectively a 'no-op' that will reset any
      // previous service worker registered for the same host:port combination.
      // We do this in development to avoid hitting the production cache if
      // it used the same host and port.
      // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
      app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
    },
  };
};

/@弹出时移除开始
/**
*版权所有(c)2015年至今,Facebook,Inc。
*
*此源代码根据MIT许可证获得许可,该许可证位于
*此源目录树的根目录中的许可证文件。
*/
//@在弹出端移除
"严格使用",;
常数fs=要求('fs');
const errorOverlayMiddleware=require('react-dev-utils/errorOverlayMiddleware');
const evalSourceMapMiddleware=require('react-dev-utils/evalSourceMapMiddleware');
const noopServiceWorkermiddle=require('react-dev-utils/noopServiceWorkermiddle');
const ignoredFiles=require('react-dev-utils/ignoredFiles');
const redirectServedPath=require('react-dev-utils/redirectServedPathMiddleware');
常量路径=需要('./路径');
const getHttpsConfig=require('./getHttpsConfig');
const host=process.env.host | |“0.0.0.0”;
const sockHost=process.env.WDS\u SOCKET\u HOST;
const sockPath=process.env.WDS_SOCKET_PATH;//默认值:'/sockjs节点'
const sockPort=process.env.WDS\u SOCKET\u端口;
module.exports=函数(代理,allowedHost){
返回{
//WebpackDevServer 2.4.3引入了一个安全修复程序,可防止远程访问
//通过DNS重新绑定可能访问本地内容的网站:
// https://github.com/webpack/webpack-dev-server/issues/887
// https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
//然而,它提出了一些现有的用例,例如在云中开发
//开发中的环境或子域要复杂得多:
// https://github.com/facebook/create-react-app/issues/2271
// https://github.com/facebook/create-react-app/issues/2233
//在我们研究更好的解决方案时,现在我们将采取
//妥协。因为我们的WDS配置只提供“公共”中的文件`
我们不会考虑访问它们的漏洞。但是,如果你
//使用“代理”功能,它会变得更危险,因为它会暴露
//Django和Rails等后端存在远程代码执行漏洞。
//因此,我们将正常禁用主机检查,但如果您有
//指定了'proxy'设置。最后,如果您
//真正了解使用特殊的环境变量所做的工作。
禁用主机检查:
!proxy | | process.env.DANGEROUSLY_DISABLE_HOST_CHECK=='true',
//对生成的文件启用gzip压缩。
是的,
//关闭WebpackDevServer自己的日志,因为它们通常没有用处。
//它仍将显示此设置的编译警告和错误。
clientLogLevel:“无”,
//默认情况下,WebpackDevServer提供来自当前目录的物理文件
//除了它从内存提供的所有虚拟构建产品之外。
//这是令人困惑的,因为这些文件在中不会自动可用
//生产生成文件夹,除非我们复制它们。但是,复制整个
//项目目录很危险,因为我们可能会暴露敏感文件。
//相反,我们建立了一个约定,只允许“public”目录中的文件
//获得服务。我们的构建脚本将把“public”复制到“build”文件夹中。
//在'index.html'中,您可以获得'public'文件夹的URL,其中包含%public\u URL%:
// 
//在JavaScript代码中,您可以使用“process.env.PUBLIC\uURL”访问它。
//请注意,我们只建议将“public”文件夹用作转义图案填充
//对于像“favicon.ico”、“manifest.json”这样的文件以及
//由于某种原因,通过网页导入时会出现故障。如果您只想
//使用一个图像,将它放在'src'中,然后从JavaScript中将其输入'import'。
contentBase:path.appPublic,
contentBasePublicPath:Path.publicUrlOrPath,
//默认情况下,“contentBase”中的文件不会触发页面重新加载。
watchContentBase:是的,
//启用热重新加载服务器。它将提供WDS\U套接字\U路径端点
//用于WebpackDevServer客户端,以便它可以了解文件何时被删除
//已更新。WebpackDevServer客户端包含为入口点
//在网页包开发配置中。请注意,只有
//当前已热加载到CSS。JS更改将刷新浏览器。
热:是的,
//在服务器上使用“ws”而不是“sockjs节点”,因为我们使用的是本机
//“WebPackageHotDevClient”中的WebSocket。
传输模式:“ws”,
//防止WS-client被注入,因为我们已经包括
//`webpackHotDevClient`。
客户:错,
//为websocket连接到热重新加载服务器启用自定义sockjs路径名。
//为websocket连接启用自定义sockjs主机名、路径名和端口
//到热重新加载服务器。
主持人,,
sockPath,
索克波特,
//告诉WebpackDevServer使用与相同的“publicPath”路径非常重要
//我们在网页包配置中指定了。当主页为“.”时,默认为“服务”
//从根本上说。
//删除最后一条斜线,以便用户可以在`/test`而不是`/test`上着陆/`
publicPath:path.publicUrlOrPath.slice(0,-1),
//WebpackDevServer在默认情况下是有噪声的,因此我们会发出自定义消息
//通过使用上面的`compiler.hooks[…].tap`调用侦听编译器事件。
安静:是的,
//据报道,这可以避免某些系统上的CPU过载。
// https://github.com/facebook/create-react-app/issues/293
//src/node_模块不被忽略以支持绝对导入
// https://github.com/facebook/create-react-app/issues/
 watchOptions: {
      ignored: ignoredFiles(paths.appSrc),
    },
const ignoredFiles = require('react-dev-utils/ignoredFiles');
 watchOptions: {
      ignored: [ignoredFiles(paths.appSrc), yourUploadPath],
    },