javascript - 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)。

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.

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