2

I'm trying to implement long-term caching of my js project. I've been using the survivejs (http://survivejs.com/webpack_react/developing_with_webpack/) page as a tutorial.

What I've found is that both .css and .js use the same hash:

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

and when I JUST change .css file, both files are updated (I would expect the .js file to stay the same?).

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

I've verified that the file that wasn't supposed to change has the same md5 sum.

Ultimately what I want is that if I change styling, the generated css hash would change and the js hash would remain the same (and vice-versa). i.e. the js contents hasn't changed, it's cached in the browser, so why force a re-download.

I've created a sample github repo to demonstrate. (The readme has a few more details).

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

I would appreciate some help. I'm fairly new to webpack and it's most likely a config error, but I've spent 2 days trying everything I can.

Thanks.

Juho Vepsäläinen
  • 26,573
  • 12
  • 79
  • 105
vlod
  • 41
  • 7
  • node -v => v4.1.0 webpack => 1.12.2 – vlod Oct 13 '15 at 17:09
  • Author here. I see your repository isn't available anymore. Do you want to push it out there again so I can have a proper look? – Juho Vepsäläinen Jan 26 '16 at 08:34
  • Thanks for looking into this. I've uploaded the repo again to github (the above link should work). Since I couldn't figure out what was wrong (I tried to explain my thinking in the README) and moved to 'webpack-md5-hash' which works. I would still appreciate if you can take a quick look and see if I'm doing anything stupid. – vlod Jan 27 '16 at 16:21
  • Alright. I can see one thing straight away. Your configuration doesn't generate a manifest. That's something the chapter was missing earlier. Extracting that manifest portion fixed the hashing behavior. I'll write more about that in an answer. – Juho Vepsäläinen Jan 27 '16 at 18:45
  • Btw, if you have any problems with the book content, feel free to contact me directly in the future. Faster to resolve. :) – Juho Vepsäläinen Jan 27 '16 at 18:45

1 Answers1

1

The problem with the original configuration was that JS/CSS belonged to the same chunk. So if CSS changed, so did the chunk -> both JS/CSS were invalidated. Based on this realization I ended up separating the CSS to a chunk of its own. This can be achieved by setting up an entry point of its own like this:

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'
  ]
}

This entry pulls all the CSS you need. There are some caveats:

  • In addition to CSS, this will generate a JS file. The file won't do much given you most likely just extract the CSS out of it through ExtractTextPlugin, but it will still exist.
  • The approach won't scale to more complicated scenarios. If you need to refer to CSS from your JS code, you hit the original problem again.

See my boilerplate for the full configuration.

Juho Vepsäläinen
  • 26,573
  • 12
  • 79
  • 105
  • Thanks for your help! – vlod Jan 27 '16 at 21:17
  • Actually no. I added your suggestion to my project (github project above) and it still exhibits the same problems as before. – vlod Jan 28 '16 at 16:54
  • Sorry I haven't had a change to go through the book again to see if you've added anything different to what I've done. – vlod Jan 28 '16 at 16:58
  • No worries. You can find [the full source of the book](https://github.com/survivejs/webpack_react). I also have a [boilerplate](https://github.com/survivejs/react-component-boilerplate) with the setup. – Juho Vepsäläinen Jan 28 '16 at 17:01
  • Thanks for the boilerplate link. I've tried using that instead and am getting the same result. I'm probably doing something stupid. Doing a 'npm run gh-pages' on your boilerplate I'm getting app.js and styles.css being generated with hash 'd44713f98d49c51ef8fc'. I then change main.css background from #fefefe to #ff0000 and rerun 'npm run gh-pages'. Both app.js and styles.css have the same hash 'ec64b850f0e97947d7dd' while I would only expect the styles.css to have changed. – vlod Jan 28 '16 at 17:25
  • Ok, my bad then. I'll try to get this fixed soon. Thanks for the heads up. – Juho Vepsäläinen Jan 28 '16 at 17:31
  • Quick update. I tried it with [NamedModulesPlugin](https://github.com/survivejs/react-component-boilerplate/tree/named_modules). The problem is that there's some glitch with that and **ExtractTextPlugin** so the JavaScript portion won't load (it still tried to point at CSS). That's something I need to resolve next. – Juho Vepsäläinen Jan 29 '16 at 09:09
  • @wkalicun I figured out a workaround. The problem was that altering the CSS invalidated the chunk. I ended up setting up a separate entry point for the CSS. This seems to work with some caveats discussed at the answer. I hope this helps! – Juho Vepsäläinen Jan 29 '16 at 12:18
  • Thanks for all your help! – vlod Jan 29 '16 at 17:15
  • No probs. I would love to find a proper solution for this. The thread discussing the issue at GitHub is kind of long. :) Going through a separate chunk seems like the sanest option for now. – Juho Vepsäläinen Jan 29 '16 at 17:53