react-hot-loader的webpack输出文件到哪里去了?

Where do the webpack output files from the react-hot-loader go?

本文关键字：webpack 输出 文件 react-hot-loader      更新时间：2023-09-26

让我先说一下，我所设置的一切都是有效的，这只是一个困扰我的问题，我希望得到一个答案。我正在使用react-hot-boilerplate项目(https://github.com/gaearon/react-hot-boilerplate)。然而，在webpack.config.js中，这个设置让我非常困惑:

output: {
  path: path.join(__dirname, 'dist'),
  filename: 'bundle.js',
  publicPath: '/static/'
},

在这个配置中，看起来输出文件应该进入项目根目录下的dist文件夹。即使我手动创建dist文件夹(我知道我不应该这样做)，也没有文件输出。然而，一切都很好;如果我更改了组件中的某些内容，应用程序将加载并热加载。这个输出文件实际到哪里去了?

react-hot-boilerplate的所有繁重工作(就热重新加载文件而言)都由webpack-dev-server依赖项完成。

webpack-dev-server反过来使用webpack-dev-middleware来处理文件的服务(来自express)。

这段关于Webpack Dev Server的文档应该能让你很好地了解这个机制是如何工作的:

使用这个配置webpack-dev-server将提供静态文件您的构建文件夹并监视源文件的更改。当做出更改后，bundle将被重新编译。修改后的包在publicPath中指定的相对路径从内存中服务(见API)。它不会被写到您配置的输出目录中。当一个bundle已经存在于同一个url路径中时内存优先。

例如，使用上面的配置，您的bundle将是可用的localhost: 8080/资产/bundle.js

这是来自webpack-dev-middleware文档的一个很好的片段:

webpack-dev-middleware是一个基于连接的小型中间件中间件堆栈。它使用webpack来编译内存中的资源为他们服务。当编译运行时，对所服务的每个请求在我们有一个稳定的bundle之前，Webpack资源会被阻塞。

因此，在开发服务器内部，文件被写入内存文件系统，然后提供服务。资产端点从内存位置提供文件，并创建一个web套接字连接来推送进一步的更改。

相关文章：