Let's say you have a site built around jQuery. You don't download jQuery and use your copy, but you use a version from a CDN, making use of the caching on client's browsers. That works because if one site uses the CDN version, it will be cached and every site that uses the same version will benefit, not having to download an identical file every time.
One day, someone hacks into the CDN servers and replaces the JavaScript files with altered versions that submit every keystroke to the attacker's servers somewhere. And every single site that uses that script is affected, your site included.
Here enters Subresource Integrity - SRI. It prevents a third party from altering external resources undetected. If you have SRI enabled on your external resources, a client browser will not load resources with hash mismatches.
then they could easily just replace the root resource with hashes of their own malicious code
Not really. SRI protects your site (code you control) from changes on a third party script, which you don't control. An attack on your code is not protected by SRI, because if an attacker changes a third party script and your site, he can do the same changing only your site with way less trouble. After all, attacking your site is easier than attacking Akamai, CloudFlare, Google, or Microsoft.