Question

突然，由于源中的更改，webpack-dev-server不再重新加载。 HRM已正确加载，但是更改源代码不会再触发热重新加载。以前它工作正常。

我发现有很多人在Stackoverflow中询问同一问题。他们每个人都有不同的解决方案，虽然我尝试过，但没有一个对我有用。因此，这不是重复的问题，因为我尝试了已经提供的解决方案，但没有一个对我有用。

我尝试清理软件包并重新安装所有软件包我尝试使用不同的路径进入webpack配置的“条目”

webpack.config.js：

var path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

const webpack = require('webpack')

module.exports = {
  mode: 'development',
  entry: './src/index.tsx',
  resolve: {
      extensions: [".ts", ".tsx", ".js"]
    },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js'
  },

    plugins: [
          new HtmlWebpackPlugin({
            title: "test app",
            filename: "./index.html",
            template: "src/index.html",
            inject: "body",
          }),
          new CopyWebpackPlugin([{ from: 'assets', to: 'assets'}]),
          new webpack.DefinePlugin({
              VERSION:     JSON.stringify(process.env.npm_package_version),
      }),
      new webpack.HotModuleReplacementPlugin({

      }),
    ],

  devServer: {
    contentBase: path.join(__dirname, 'dist'),
compress: true,
host: "localhost",
port: 9000,
hot: true,
disableHostCheck: true,
  },
  module: {
    rules: [
    { test: /\.(tsx)?$/, 
      loader: "ts-loader",
        exclude: path.join(__dirname, 'node_modules'),
    },
    {test: /\.css$/, use: ['style-loader',{loader:'css-loader',     options:{}}]}
    ],
  },
  node: {
fs: 'empty'
  }

};

我希望HRM像往常一样工作。

Answer 1

我突然又开始工作，没有任何明显的原因。我没有修改任何配置文件或源文件，现在，运行开发服务器将在源代码更改后正确地热加载。

因此，我可以得出结论，这不是项目的任何配置文件中的错误，而是可能与开发服务器的实现本身或操作系统没有传递文件的更改有关？

Answer 2

HMR依赖于webpack通知文件系统事件，而根据我的个人经验，与监视文件有关的主机特定问题一直是HMR和编译器监视无法按预期工作的唯一问题。

在撰写本文时，由于系统限制，可能silently fail观看。此外，某些环境需要配置为使用轮询。

Watch and WatchOptions上有一个相关文档，其中提供了有关如何配置Webpack的更多详细信息。此外，委派给的chokidar提供了其他配置方式，例如来自流程环境的CHOKIDAR_USEPOLLING。

Webpack开发服务器未重新加载

2 个答案: