对于 css 和 js 文件，Webpack 散列相同。当只有一个应该改变时，两者都会改变答案

【问题标题】：Webpack hash the same for css and js files. Both change when only one should对于 css 和 js 文件，Webpack 散列相同。当只有一个应该改变时，两者都会改变
【发布时间】：2015-10-13 17:07:35
【问题描述】：

我正在尝试实现我的 js 项目的长期缓存。我一直在使用survivorjs (http://survivejs.com/webpack_react/developing_with_webpack/) 页面作为教程。

我发现 .css 和 .js 都使用相同的哈希：

app.860846ea86c7b67eddd0.js       132 kB       0  [emitted]  app
styles.860846ea86c7b67eddd0.css   21 bytes       0  [emitted]  app

当我只是更改 .css 文件时，两个文件都会更新（我希望 .js 文件保持不变？）。

app.353477b32cc15ea06465.js     132 kB       0  [emitted]  app
styles.353477b32cc15ea06465.css   20 bytes       0  [emitted]  app

我已验证不应更改的文件具有相同的 md5 总和。

最终我想要的是，如果我改变样式，生成的 css 哈希会改变，而 js 哈希会保持不变（反之亦然）。即js内容没变，缓存在浏览器里，为什么要强制重新下载。

我创建了一个示例 github 存储库来演示。（自述文件有更多细节）。

https://github.com/vlod/webpack_chunk_strange/tree/master

我将不胜感激。我是 webpack 的新手，很可能是配置错误，但我花了 2 天时间尽我所能。

谢谢。

【问题讨论】：

node -v => v4.1.0 webpack => 1.12.2
作者在这里。我看到您的存储库不再可用。要不要再把它推到那里让我好好看看？
感谢您对此进行调查。我已经再次将 repo 上传到 github（上面的链接应该可以工作）。由于我无法弄清楚出了什么问题（我试图在 README 中解释我的想法）并转移到了“webpack-md5-hash”，它可以工作。如果你能快速看一下，看看我是否在做任何愚蠢的事情，我仍然会很感激。
好的。我可以立即看到一件事。您的配置不会生成清单。那是本章之前缺少的东西。提取该清单部分修复了散列行为。我会在答案中写更多关于这个的内容。
顺便说一句，如果您对本书内容有任何疑问，请随时直接与我联系。更快解决。 :)

标签： webpack survivejs

【解决方案1】：

原来配置的问题是 JS/CSS 属于同一个块。所以如果 CSS 改变了，那么块也改变了 -> 两个 JS/CSS 都失效了。基于这一认识，我最终将 CSS 分离为自己的一块。这可以通过像这样设置自己的入口点来实现：

entry: {
  ...
  style: [
    'purecss',
    'highlight.js/styles/github.css',
    'react-ghfork/gh-fork-ribbon.ie.css',
    'react-ghfork/gh-fork-ribbon.css',
    './demo/main.css',
    './style.css'
  ]
}

entry 提取了您需要的所有 CSS。有一些注意事项：

除了CSS，还会生成一个JS文件。鉴于您很可能只是通过 ExtractTextPlugin 从中提取 CSS，因此该文件不会做太多事情，但它仍然存在。
该方法无法扩展到更复杂的场景。如果你需要从你的 JS 代码中引用 CSS，你又遇到了原来的问题。

查看我的boilerplate 了解完整配置。

【讨论】：

感谢您的帮助！
其实没有。我将您的建议添加到我的项目（上面的 github 项目）中，它仍然表现出与以前相同的问题。
抱歉，我没有更改，可以再次浏览这本书，看看您是否添加了与我所做的不同的任何内容。
不用担心。你可以找到the full source of the book。我也有一个boilerplate 的设置。
感谢样板链接。我已经尝试使用它并得到相同的结果。我可能在做一些愚蠢的事情。在你的样板文件上做一个“npm run gh-pages”，我得到了 app.js 和 styles.css，它是用哈希“d44713f98d49c51ef8fc”生成的。然后我将 main.css 背景从 #fefefe 更改为 #ff0000 并重新运行“npm run gh-pages”。 app.js 和 styles.css 都具有相同的哈希 'ec64b850f0e97947d7dd' 而我只希望 styles.css 发生了变化。