Webpack 缓存，索引源代码中的 [hash] 值，使用 React.js答案

【问题标题】：Caching with Webpack, [hash] value inside index source code, using React.jsWebpack 缓存，索引源代码中的 [hash] 值，使用 React.js
【发布时间】：2015-07-30 09:57:38
【问题描述】：

我正在构建一个同构应用程序。它完全是用 react 构建的——即 html 基础也在 react 中。

我将根 html 作为应用组件。

看起来像这样：

...
var AppTemplate = React.createClass({
    displayName: 'AppTemplate',
    render: function() {
        return (
            <html>
                    <head lang="en">
                        <title>hello</title>
                        <link rel="stylesheet" href='/css/style.css' />
                    </head>
                    <body>
                        <RouteHandler {...this.props}/>
                        <script type='text/javascript' src='/js/bundle.js' />
                    </body>
                </html>
        );
    }
});
...
module.exports = AppTemplate;

当我使用 webpack 构建项目时，我需要替换 js/bundle.js 以包含哈希。

Webpack 在完成后交付 stats.json。但我需要在构建期间提供哈希值。

我正在考虑使用功能标志来执行以下操作：

...
var AppTemplate = React.createClass({
    displayName: 'AppTemplate',
    render: function() {
        return (
            <html>
                    <head lang="en">
                        <title>hello</title>
                        <link rel="stylesheet" href='/css/style.css' />
                    </head>
                    <body>
                        <RouteHandler {...this.props}/>
                        <script type='text/javascript' src='/js/bundle.{__HASH__}.js' />
                    </body>
                </html>
        );
    }
});
...
module.exports = AppTemplate;

理想情况下，将正确的哈希引用注入到构建的 js 中。

这有点棘手，因为它是自引用的。有更好的方法吗？在 webpack 完成后修改构建的代码似乎适得其反。我也想过让客户端简单地请求 bundle.js，但让我的节点服务器提供散列文件。

这种缓存的正确解决方案是什么？

【问题讨论】：

标签： node.js caching reactjs webpack isomorphic-javascript

【解决方案1】：

我发现最好的解决方案是将 webpack 资产传递到应用程序中，而不是尝试在应用程序中呈现它。这可以直接通过道具或通量。

这样，您的代码将使用变量呈现。您的变量的值与构建过程无关。

...
var AppTemplate = React.createClass({
    displayName: 'AppTemplate',
    render: function() {
        return (
            <html>
                    <head lang="en">
                        <title>hello</title>
                        <link rel="stylesheet" href='/css/style.css' />
                    </head>
                    <body>
                        <RouteHandler {...this.props}/>
                        <script type='text/javascript' src={this.props.jsFile} />
                    </body>
                </html>
        );
    }
});
...
module.exports = AppTemplate;

类似的东西。

【讨论】：

【解决方案2】：

ExtendedAPIPlugin 将__webpack_hash__ 变量添加到您的包中，这可能就是您要查找的内容。

【讨论】：

这正是我想要的。

【解决方案3】：

您永远不应该在客户端上呈现完整的 HTML。您的头部和正文中应用程序 div 之外的所有内容都应该从服务器发送。这样您的问题就会立即得到解决，因为您的客户端 Javascript 不需要知道它所在的文件，而在服务器上您只需等待统计信息准备好即可。

【讨论】：

它是一个同构应用程序。这个反应应用程序在服务器上呈现，React.renderToString()。这会呈现一个字符串（或只是组件的视图部分）。它包括头部和应用程序之外的所有内容，并从服务器向下发送。在客户端，您必须使用完全相同的 react 应用程序“补充”文档。在客户端上，您执行React.render()，这将呈现视图+功能/事件处理程序。
当然，但是您不应该尝试在客户端上重新合成完整的 HTML（包括所有脚本标签），这只是不必要的。在运行时，你身体之外的任何东西通常都不会改变。看看这里有一个很好的例子：github.com/yahoo/flux-examples/tree/master/fluxible-router 基本上：在你的 body 中创建一个应用程序 div，将你的实际 React 应用程序渲染为一个字符串并在应用程序 div 中打印它。然后渲染外部 HTML 并将渲染的应用程序 div 放入其中。然后将您的应用重新水化到应用 div 中。我用这种方式构建了一个相当大的 Fluxible 应用程序，包括 [hash]，效果很好！