来自react-hot-loader的webpack输出文件在哪里?

时间:2015-08-12 14:13:54

标签: javascript reactjs webpack

让我先说一下我所设置的所有内容,这只是一个唠叨我的问题,我很想得到答案。我正在使用react-hot-boilerplate项目(https://github.com/gaearon/react-hot-boilerplate)。但是,在sqlite3中,此设置让我感到困惑:

webpack.config.js

在此配置中,输出文件看起来应该进入项目根目录中的output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js', publicPath: '/static/' }, 文件夹。即使我手动创建dist文件夹(我知道我不应该这样做),也不会输出任何文件。然而一切都很好;应用程序加载,如果我更改组件中的某些内容,将进行热重新加载。这个输出文件实际上在哪里?

1 个答案:

答案 0 :(得分:4)

反应热文件板的所有繁重工作(就热重载文件而言)都是由webpack-dev-server依赖完成的。

webpack-dev-server依次使用webpack-dev-middleware来处理文件的服务(来自快递)。

This bit of documentation about Webpack Dev Server应该让您对该机制的工作原理有一个很好的概述:

  

使用此配置webpack-dev-server将提供静态文件   您的构建文件夹并查看源文件以进行更改。什么时候   更改捆绑包将被重新编译。这个修改过的包   从publicPath中指定的相对路径的内存中提供   (见API)。它不会写入配置的输出目录。   捆绑已经存在于同一URL路径中的捆绑包   记忆将优先。

     

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

这是webpack-dev-middleware docs中的一小部分:

  

webpack-dev-middleware是一个基于连接的小型中间件   中间件堆栈。它使用webpack在内存中编译资产   为他们服务。当编译正在运行对服务的每个请求时   webpack资产被阻止,直到我们有一个稳定的捆绑包。

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