react-hot-loader生成的webpack输出文件放在哪里？

Question

首先声明，我设置的所有内容都是有效的，这只是一个困扰我的问题，我很想得到答案。我正在使用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文件夹（我知道我不应该这样做），也没有任何文件被输出。然而一切都正常工作；应用程序加载并且如果我更改组件中的内容，则会进行热重载。这个输出文件实际上在哪里？

- taylorc93

Answer 1

在react-hot-boilerplate中，所有与热重载文件相关的重要工作都由webpack-dev-server依赖项完成。

而webpack-dev-server则使用webpack-dev-middleware来处理文件的服务（来自express）。

关于Webpack Dev Server的这一部分文档应该能够为您提供有关机制如何工作的很好概述：

使用此配置，webpack-dev-server将为您的构建文件夹中的静态文件提供服务，并监视源文件的更改。当进行更改时，将重新编译捆绑包。此修改后的捆绑包将从内存中的相对路径（请参见API）提供服务。它不会写入您配置的输出目录。如果在相同的URL路径下已经存在捆绑包，则内存中的捆绑包将优先。

例如，使用上面的配置，您的捆绑包将可用于localhost:8080/assets/bundle.js

而这是来自webpack-dev-middleware文档的一个很好的部分：

webpack-dev-middleware是一个用于基于connect的中间件栈的小型中间件。它使用webpack在内存中编译资产并提供服务。当编译正在运行时，所有对提供的webpack资产的请求都将被阻塞，直到我们有一个稳定的捆绑包。

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

- Davin Tryon