react-hot-loader的webpack输出文件会去哪里？

Question

Let me preface this by saying that everything I have set up works, this is just a question that's nagging me that I would love to get an answer for. I'm using the react-hot-boilerplate project ( https://github.com/gaearon/react-hot-boilerplate ). However, in webpack.config.js , this setting is confusing me to no end:

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

In this config, it looks like the output file should go into the dist folder in root of the project. Even if I manually create the dist folder (which I know I shouldn't have to do), no file gets outputted. Yet everything works totally fine; the app loads and will hot-reload if I change something in the components. Where is this output file actually going?

Answer 1

All of the heavy lifting for react-hot-boilerplate (in terms of hot reloading files) is done by the webpack-dev-server dependency.

webpack-dev-server in turn uses webpack-dev-middleware to handle the serving of the files (from express).

This bit of documentation about Webpack Dev Server should give you a good overview about how the mechanism works:

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

And this is a good bit from the webpack-dev-middleware docs:

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.

So, inside the dev server, the files are written to an in memory-file system and then served. The assets endpoint serves files from the in-memory location as well as creates a web socket connection to push down further changes.