[optimizer] Use relative paths instead of absolute publicPath

[jbudz]

Currently, when creating bundles with webpack we use absolute urls to locate static assets in stylesheets. When the base path changes, these bundles have to be regenerated. This forces an optimization step, which short term takes time, and long term gets in the way of us not shipping webpack.

This switches to using relative paths for assets.

An example in optimize/kibana.style.css, before:

.panel-product .panel-heading-elasticsearch {
  background-image: url(/my_base_path/bundles/6a80accb153b8f8177a67951b7fc4cc2.svg);
}

After:

.panel-product .panel-heading-elasticsearch {
  background-image: url(6a80accb153b8f8177a67951b7fc4cc2.svg);
}

Closes #10724

[jbudz]

jenkins, test this

[spalger]

This makes me nervous because we experienced some pretty tough issues with base path support and webpack. Do you have an example that verifies that this will work?

[tylersmalley]

LGTM - tested under dev and with nginx proxy

[jbudz]

@spalger I'm similarly nervous, but I'm not sure of any decent alternatives. We could inline these files or load them elsewhere, but there's a size cost or we would be limiting ourselves to not using url(). And we would have to find a way to deal with stylesheets in node modules.

[jbudz]

My nginx config:

http {
  server {
    listen 5620;
    location /foo/ {
      proxy_pass http://localhost:5601/;
    }
  }
}

[spalger]

I'm more curious what files are impacted by webpack's publicPath option so we can make sure that they are working with the new setting

[jbudz]

@spalger Reread the docs, my understanding is any files loaded via webpack beyond the entry point. File loader, require.ensure, img src

[spalger]

Found an example that this breaks, the images in the URL field formatter example

[tylersmalley]

@spalger, those are already broken with a base-path. I have a fix I will open a PR for.

[tylersmalley]

@spalger @jbudz - created issue to resolve the URL field formatter example: #11082

[spalger]

I created a test plugin that uses chunking and it fails because webpack tries to load files from the root of the url.

I was able to get this working with these changes though: https://gist.github.com/anonymous/10fcda4f301cf8420aa94ec65559ca04

The <base> tag isn't one I've seen used often, but it allows you to tell the browser how to resolve relative urls, which means that webpack can use ./bundles/ as it's public directory and it will resolve fine regardless of the url that loads the bundle or the basePath. This changes the way that all relative urls are resolved though, which means that other things break, but it's an option if we really want this.

[epixa]

@spalger In the long term, we need this change in a fundamental sense. The new build system won't allow rewriting of paths in bundles like the current behavior relies on.

[spalger]

I agree, but in the future webpack bundles will still need a reliable way to load additional files from the build so I think the <base> tag solution is necessary here.

[spalger]

#10854 (comment)

[epixa]

I agree, but in the future webpack bundles will still need a reliable way to load additional files from the build so I think the tag solution is necessary here.

++ I like the consistency that <base> provides as well. It's something kibana core can change as necessary to accommodate configurations like basePath and the value itself is something that plugins don't need to consider.

[jbudz]

@spalger stylesheets won't use the base tag, so the paths in those will be broken. Are you saying use base without the publicPath?

[spalger]

@jbudz in what case won't stylesheets use the base tag? Any relative url should use it, maybe the urls are not relative? Maybe they could be made relative?

[jbudz]

Sorry I could have worded that better, I mean paths inside stylesheets. My understanding is elements in the document will use it, but styles like background-image: url() won't . Those paths are based on the publicPath. With the patch above things like the kibana logo are missing the base path.

[jbudz]

When I get a chance I'll look into configuring the publicPath at runtime for the require.ensure case with window.__webpack_public_path__. That may give us the relative paths in bundled stylesheets and the path we want for js.

[jbudz]

Maybe progress with the dynamic public path. ui framework svgs aren't loading but it looks like everything else is. This is getting messy.

[jbudz]

kbnHrefs are off too,

[jbudz]

I'm going to close this one for now. I haven't had any time to work on it.