Question

第一个问题在这里。以前，热重装可以正常工作，然后重新安装操作系统，现在不起作用。目前有一个难看的修复程序。

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

在当前机器上，我可以npm运行1个会话。关闭并启动后，热重载将无法进行。然后，我将： 1.删除node_modules 2. npm缓存清除--force 3. npm安装如此答案https://github.com/webpack/webpack-dev-server/issues/1003#issuecomment-328706990

中所述

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

我正在使用Xubuntu，VScode，firefox。

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出现问题。现在都开心。链接摘要：在Linux上，默认情况下，Listen使用inotify监视目录中的更改。遇到可以监视的文件数量受到系统限制的情况并不少见。例如，Ubuntu Lucid（64位）的inotify限制设置为8192。

修复：运行命令以增加限制。在下面找到并且取决于操作系统

来自链接：

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

如果您正在运行Debian，RedHat或其他类似的Linux 分发，在终端中运行以下命令：

Route::get('/article', array('as' => 'accueil', function()
{
  $categories = \App\Categorie::latest()->get();
  $articles = \App\Article::select('id', 'title', 'intro_text')->orderBy('created_at', 'desc')->get();
set_time_limit(0);
  return view('accueil', ['categories' => $categories, 'articles' => $articles, 'actif' => 0]);  
}));

如果您正在运行ArchLinux，请改为运行以下命令（请参阅这里https://www.archlinux.org/news/deprecation-of-etcsysctlconf/的原因）：

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

然后将其粘贴到您的终端中，然后按Enter键运行它。技术细节

Listen在Linux上默认使用inotify监视目录中的更改。遇到可以监视的文件数量受到系统限制的情况并不少见。例如，Ubuntu Lucid（64位）的inotify限制设置为8192。

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

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

如果此限制不足以监视目录中的所有文件，则必须增加该限制以使“侦听”正常工作。

您可以使用以下方法临时设置新的限制：

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

如果您想将限额设为永久性，请使用：

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

如果Listen不断抱怨，您可能还需要注意max_queued_events和max_user_instances的值。

热装问题；通过删除node_modules和缓存清除

1 个答案: