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

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

首先让我说我设置的一切都有效,这只是一个困扰我的问题,我很想得到答案。我正在使用 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)。

This bit of documentation about Webpack Dev Server 应该可以让您很好地了解该机制的工作原理:

Using this config webpack-dev-server will serve the static files in your build folder and watch your source files for changes. When changes are made the bundle will be recompiled. This modified bundle is served from memory at the relative path specified in publicPath (see API). It will not be written to your configured output directory. Where a bundle already exists at the same url path the bundle in memory will take precedence.

For example with the configuration above your bundle will be available at localhost:8080/assets/bundle.js

这来自 webpack-dev-middleware 文档:

The webpack-dev-middleware is a small middleware for a connect-based middleware stack. It uses webpack to compile assets in-memory and serve them. When a compilation is running every request to the served webpack assets is blocked until we have a stable bundle.

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