linux 上的热重载问题；通过删除 node_modules 和缓存来清除。固定的

Question

这里是第一个问题。热重装过去工作正常，然后 OS 重新安装，现在不工作了。目前有一个丑陋的修复。

我的朋友建立了一个我一直在学习的 React 项目。我最近不得不重新安装 OS。在此之前，热重装工作正常。

使用我当前的机器，我可以 npm 运行 1 个会话。关机和启动后热重装不起作用。那我会:

删除node_modules
npm 缓存清除 --force
npm 安装

在这个答案中找到 https://github.com/webpack/webpack-dev-server/issues/1003#issuecomment-328706990

我假设它是我的机器 - 不知道去哪里找。任何帮助都会很棒。每次这样做都会有点痛。谢谢

我正在使用 Xubuntu、VScode、火狐。

webpack.config.js 的内容。不确定是否有帮助

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

function createWebpackConfig() {
  const prod = process.env.NODE_ENV === 'production' || false;
  const dev = !prod;
  const buildDir = path.join(__dirname, 'build');
  const projDir = path.join(__dirname, 'src');
  const commonDir = path.join(projDir, 'common');

  const devPlugins = [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ];

  const prodPlugins = [
    new MiniCssExtractPlugin({
      filename: 'main-[contenthash].css',
      allChunks: true
    }),
    new webpack.optimize.AggressiveMergingPlugin()
  ];

  return {
    entry: {
      app: path.join(projDir, 'index.js')
    },

    output: {
      path: buildDir,
      sourceMapFilename: '[name].map',
      filename: `[name]-[${dev ? 'hash' : 'chunkhash'}].js`
    },

    resolve: {
      modules: ['src', 'node_modules'],
      extensions: ['.js', '.jsx', '.css', '.scss'],
      alias: {
        actions: path.join(commonDir, 'actions'),
        reducers: path.join(commonDir, 'reducers'),
        assets: path.join(commonDir, 'assets'),
        components: path.join(commonDir, 'components'),
        styles: path.join(commonDir, 'styles'),
        commonStyles: path.join(commonDir, 'styles', 'common.scss'),
        utils: path.join(commonDir, 'utils')
      }
    },

    cache: dev,

    devtool: dev ? 'cheap-module-source-map' : false,

    stats: {
      colors: true,
      reasons: true,
      hash: Boolean(prod),
      version: Boolean(prod),
      timings: true,
      chunks: Boolean(prod),
      chunkModules: Boolean(prod),
      cached: Boolean(prod),
      cachedAssets: Boolean(prod)
    },

    plugins: [
      new HtmlWebpackPlugin({
        template: path.join(projDir, 'index.template.html'),
        title: 'IMDB Clone',
        favicon: path.join(commonDir, 'assets', 'favicon.ico'),
        inject: false,
        minify: {
          removeComments: Boolean(prod),
          collapseWhitespace: Boolean(prod),
          removeRedundantAttributes: Boolean(prod),
          useShortDoctype: Boolean(prod),
          removeEmptyAttributes: Boolean(prod),
          removeStyleLinkTypeAttributes: Boolean(prod),
          keepClosingSlash: Boolean(prod),
          minifyJS: Boolean(prod),
          minifyCSS: Boolean(prod),
          minifyURLs: Boolean(prod)
        },
        baseUrl: dev ? '' : "location.protocol + '//' + location.host"
      }),
      new webpack.ProvidePlugin({
        React: 'react',
        PropTypes: 'prop-types',
        classNames: 'classnames'
      })
    ].concat(dev ? devPlugins : prodPlugins),

    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              cacheDirectory: dev
            }
          }
        },
        {
          test: /\.css$/,
          include: /node_modules/,
          use: ['style-loader', 'css-loader']
        },
        {
          test: /\.s?css$/,
          exclude: /node_modules/,
          use: dev
            ? [
                'style-loader',
                {
                  loader: 'css-loader',
                  options: {
                    minimize: Boolean(prod),
                    localIdentName: dev ? '[path][name]__[local]' : '',
                    modules: true,
                    url: false,
                    sourceMap: true,
                    importLoader: 2
                  }
                },
                {
                  loader: 'sass-loader',
                  options: {
                    sourceMap: true
                  }
                }
              ]
            : MiniCssExtractPlugin.extract({
                fallback: 'style-loader',
                use: [
                  {
                    loader: 'css-loader',
                    options: {
                      minimize: Boolean(prod),
                      modules: true
                    }
                  },
                  'sass-loader'
                ]
              })
        },
        {
          test: /\.html$/,
          exclude: [/node_modules/, path.join(__dirname, 'src', 'index.template.html')],
          use: [
            {
              loader: 'html-loader',
              options: {
                minimize: true
              }
            }
          ]
        },
        {
          test: /\.(jpg|png|eot|svg|ttf|woff|woff2)?(\?[a-z0-9#=&.]+)?$/,
          use: 'file-loader'
        }
      ]
    },

    devServer: {
      historyApiFallback: true
    }
  };
}

module.exports = createWebpackConfig();

Answer 1

更新：已找到修复程序！ https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers?fbclid=IwAR1zVoZK_jSBXnpDdH3aXO_vwNyDoYoOmdhbXkGcsxh9QNmziHn19Gw6KmA

我运行宁 Ubuntu 并且 inotify 有问题。现在都很开心。来自 link 的摘要：默认情况下，Listen 在 Linux 上使用 inotify 来监视目录的变化。系统对您可以监控的文件数量进行限制的情况并不少见。例如，Ubuntu Lucid 的（64 位）inotify 限制设置为 8192。

修复：运行命令增加限制。在下面找到并且 OS 依赖

来自link：

如果您对技术细节不感兴趣，只想让 Listen 工作：

如果您运行正在使用 Debian、RedHat 或其他类似软件 Linux 分发，运行终端中的以下内容：

    echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

如果你运行ning ArchLinux，运行以下命令代替（见这里 https://www.archlinux.org/news/deprecation-of-etcsysctlconf/ 为什么）：

    echo fs.inotify.max_user_watches=524288 | sudo tee /etc/sysctl.d/40-max-user-watches.conf && sudo sysctl --system

然后将其粘贴到您的终端并按回车键运行。技术细节

Listen 默认在 Linux 上使用 inotify 来监视目录的变化。系统对您可以监控的文件数量进行限制的情况并不少见。例如，Ubuntu Lucid 的（64 位）inotify 限制设置为 8192。

您可以通过执行以下命令获取当前的 inotify 文件监视限制：

$ cat /proc/sys/fs/inotify/max_user_watches

当此限制不足以监控目录中的所有文件时，必须增加限制才能使 Listen 正常工作。

您可以设置一个临时的新限制：

$ sudo sysctl fs.inotify.max_user_watches=524288
$ sudo sysctl -p

如果您想永久限制，请使用：

$ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf
$ sudo sysctl -p

如果Listen一直报错，你可能还需要注意max_queued_events和max_user_instances的值

linux 上的热重载问题；通过删除 node_modules 和缓存来清除。固定的

Issue with hot reloading on linux; cleared with deleteing node_modules and cache. Fixed

linux

webpack

webpack-dev-server

hot-module-replacement