来自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文件夹(我知道我不应该这样做),也不会输出任何文件.然而一切都很好; 应用程序加载,如果我更改组件中的某些内容,将进行热重新加载.这个输出文件实际上在哪里？

Answer 1

React-hot-boilerplate 的所有繁重工作（就热重载文件而言）都是由 webpack-dev-server 依赖项完成的。

webpack-dev-server 反过来使用webpack-dev-middleware来处理文件服务（来自express）。

这段关于 Webpack Dev Server 的文档应该可以让您很好地了解该机制的工作原理：

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

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

这是 webpack-dev-middleware 文档中的一个很好的内容：

webpack-dev-middleware 是一个用于基于连接的中间件堆栈的小型中间件。它使用 webpack 在内存中编译资源并为其提供服务。当编译运行时，对所提供的 webpack 资源的每个请求都会被阻止，直到我们有一个稳定的包为止。

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