2

我正在尝试实现我的 js 项目的长期缓存。我一直在使用survivejs（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 repo 来演示。（自述文件有更多细节）。

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

我会很感激一些帮助。我对 webpack 还很陌生，很可能是配置错误，但我花了 2 天时间尽我所能。

谢谢。

4

1 回答 1

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 文件。该文件不会做太多，因为您很可能只是通过 从中提取 CSS ExtractTextPlugin，但它仍然存在。
  • 该方法不会扩展到更复杂的场景。如果你需要从你的 JS 代码中引用 CSS，你又遇到了原来的问题。

有关完整配置，请参阅我的样板文件。

于 2016-01-27T18:48:12.010 回答