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

Question

我正在构建同构应用程序。它完全是用 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来包含hash。

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，但让我的节点服务器提供散列文件。

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

Answer 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;

类似的东西。

Answer 2

ExtendedAPIPlugin 向您的包添加了一个 __webpack_hash__ 变量，这可能正是您要找的。

Answer 3

您永远不应该在客户端上呈现完整的 HTML。你的头和你的应用程序 div 之外的所有东西都应该从服务器发送。这样你的问题马上就解决了，因为你的客户端 Javascript 不需要知道它存在于哪个文件中，并且在服务器上你可以等待统计数据准备就绪。

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

Caching with Webpack, [hash] value inside index source code, using React.js

caching

node.js

reactjs

webpack

isomorphic-javascript